IEでもWebフォントが使えることを知ったので勉強してみました

恥ずかしながら最近までIEの旧バージョンだとWebフォントは使えないと思っていました。

以前ブログのタイトルにGoogle Web Fontsを使っていましたが、それ以降はWebフォントへの興味を失っていて、個人的に興味がそそられるような記事を見てもスルーしていました。

web-font-beginner.png

そんなとき「安全な@font-faceの書き方(抄訳) - Weblog - hail2u.net」という記事を見ました。

Webフォントの記述方法について書かれたもので、記事自体3年くらいまでのものですがかなり新鮮に感じました。そのなかにこんな一文が。

ようやく時代がMicrosoftに追いついてきた感じですね。

IEが進んでいるなんてここ数年考えたこともなかったです。けど、仰るとおりWebフォントに関してはかなり進んでいたようです。

IEの旧バージョンでもWebフォントが使えるということを知ったので勉強してみることに。

Webフォントの基本

最初の一歩としてこの記事が非常に分かりやすかったです。

Webフォントのファイル形式の種類やブラウザごとの対応状況が分かりやすく説明されています。「Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと.net」もすごくよかったです。さすがです。

これらを見てみると、なんとIE4からWebフォントに対応しています。IE4は1997年9月30日に公開されていますので、もう15年も前です。実はすごいかも。

その後、他のブラウザもWebフォントに対応していくなかで、Webフォント用に統一したフォーマットを作ろうということになり、できたのがWOFFという形式になります。

WOFF形式のフォントはWeb用に開発されており、データが軽く、著作権情報を盛り込むことができるというメリットがあります。Webフォントを使う上で、これから普及してくるフォーマットだと思われます。
第4回 CSS3のWebフォントを使ってみよう | Think IT

今後WOFF形式が主流になりそうですが、ブラウザの乗換えが進まないIEが問題になるわけです。

15年前からWebフォントが使えるとはいえ、IE8以下だと他のブラウザでは対応していないIEによるIEのためのEOTという形式が必要になります。IEが嫌われる原因はこの辺にあるのでしょうね。

CSSのフィルタにしてもIEはかなり早い段階でCSS3に近いものを使えるようになっていますが、独自すぎて今ではうっとうしい存在になってますね。

ちなみに、Google Web FontsもWOFF形式でできているそうです。

Webフォントの指定方法

フォントには様々な形式があり、ブラウザの対応状況も違うので、Webフォントの指定方法もちょっと複雑になります。

方法1
@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

指定方法は様々あるようですが、「Using @font-face | CSS-Tricks」や「The New Bulletproof @Font-Face Syntax | Fontspring」などにある方法が最近の流行っぽいです。

で、初めて見たとき、ここにある「webfont.eot?#iefix」の後半の部分がなんか変だと感じました。

複数のフォントを指定するとIE8以下でエラーが起きるそうです。#?を入れると最初のEOT形式だけ読み込んで解決だそうです。難しいですね。
参考:Best Practices for Serving Webfonts to IE9 | Fontspring

ただ、これでも完璧ではないみたいです。「意外と多い!? Web フォントに対応していない環境 ~2012 年の Web フォント事情 - てっく煮ブログ」によると4%弱のユーザーがWebフォントに対応していないようです。

あとはこんな指定方法も見かけます。

方法2
@font-face {
	font-family: MyWebFont;
	src: url("webfont.eot");
}
@font-face {
	font-family: MyWebFont;
	src: url("webfont.ttf") format("truetype")
}

上がIE用で、下がその他のブラウザ用という感じに指定しています。2つに分けてますので、こういう書き方嫌いという人もいそうです。

どちらにせよこのコードでWebフォントを読み込むことになります。次にどこでWebフォントを使うかを指定する必要があります。

.MyWebFont{
	font-family: 'MyWebFont';
}

こんな感じですね。この場合、クラス名がMyWebFontの要素に適用されます。

フォント形式について

ブラウザによって対応しているフォント形式が違うので様々な形式でフォントを用意する必要があります。

そんなときに便利なのが@FONT-FACE GENERATORです。一般的なフォント形式であるTTFやOTFからWOFF、EOT、SVGなど様々な形式に変換してくれます。さらに先ほど紹介した指定方法1のコードも作成してくれます。

FONT-FACE-GENERATOR.png

形式を変換してくれるサイトは他にもありますが、これが一番便利だと思います。変換方法は「BASIC」「OPTIMAL」「EXPERT」と3種類ありますが、OPTIMAL(最適な)でいいと思います。

すごく便利なサイトなのですが日本語フォントだと容量の関係で使えなかったので、他のツールも紹介しておきます。

ttf2eotというサイトです。TTF形式からIE用のEOT形式に変換してくれます。OTF形式からの変換はcoming soonだそうです。

ttf-eot.png

フォントサイト

ここで個人的におすすめのフォントサイトを紹介します。とりあえず今回は英語のみということで。日本語もぼちぼちでてきていますが、日本語は文字数も多くなかなか広まらないですね。

Open Font Library
openfontlibrary.png
Free Premium Fonts | download free quality TrueType fonts for Windows & Mac
freepremiumfonts.png
Handpicked free fonts for graphic designers with commercial-use licenses. | Font Squirrel
fontsquirrel.png

CSS3との相性がいい

本文は見慣れたフォントの方がいいので、Webフォントは本文よりタイトルや見出しに使うことが多いと思います。

タイトルや見出しには画像を使う方も多いと思いますが、Webフォントだとtext-shadowなんかも使えるので便利です。

text-shadowについては過去に記事にしていますのでぜひご覧ください。

ここで紹介されていますが、こんなのも作れます。Google Web Fontsにtext-shadowを使って、背景にグラデーションにしています。

webkit系のみ対応のコードですが一応コードも載せておきます。



Google Font API

このようにWebフォントとCSS3を使えば色んなことができちゃいますね。

最後に

ということで、Webフォントについて簡単に勉強してみました。

今さらですがIEも大丈夫ということを知って、個人的にはかなりハードルが下がりました。ほんと思い込みって怖いですね。

今後積極的に使っていけたらと思いますが、本文は見慣れたフォントの方がいいので、タイトルや見出しに使うのがいいと思います。

アイコンの代わりにWebフォントを使ったり、CSS3を使って装飾したりすると楽しそうなので、色々考えてみます。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加