WEBCRE8.jp > 比べる > WebフォントのCSS指定2014年度版とこれまでの歩み

WebフォントのCSS指定2014年度版とこれまでの歩み

この記事は約13分ぐらいで読めます

ぼちぼち使われ始めているWebフォントですが調べてみると、構文がけっこう昔のままで用いられていることが多いようなので、ちょっとこれをアップデートできないかと思って調べてみました！★

最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw

@font-faceルール

@font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。

しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。

Bulletproof Syntax

これまでWebフォントの指定法として、Bulletproof @font-face syntaxと呼ばれるどんなときに使っても問題の起きない構文、というようなものが研究されてきました。もともとはPaul Irishさん( @paul_irish)が紹介したもののようです。

色んなサイトを見ていてよく採用されていたのはその後Fontspringが提案したFontspring @Font-Face Syntaxという記法でした。

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
		url('myfont-webfont.woff') format('woff'), 
		url('myfont-webfont.ttf')  format('truetype'),
		url('myfont-webfont.svg#svgFontName') format('svg');
}

Fontspring @Font-Face Syntax

そして最終的にはCSS TrickのUsing @font-face | CSS-Tricksで紹介されている記法が完成形になっているのかなと思います。

@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 */
}

CSS Trick @Font-Face Syntax

この構文について理由を軽く解説すると、

IEは独自仕様としてEOTファイルを採用
IE9はカンマ区切りのsrcプロパティ複数指定を受け付けないのでまず単独の指定を行う(これは後から追加されたもの)
IE4〜8以降はフォントはsrcプロパティ複数指定、タイプ指定を受け付けないので?を付け、それ以降の記述をクエリ文字列として無視させる
ほとんどのモダンブラウザはWOFFに対応しており、今後もこれに統一されていく
特にAndroidは4.3までWOFFに対応していないためTTFが必須
SVGは極めて古い環境でしか利用されない(はず)

といった感じです！Androidが現在の4.4までWOFFに対応していないのは驚きでしたねーw

ちなみにここにはそんな古い環境まで気を使わない最低限の書き方も提案されています。

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

CSS Trick @Font-Face Syntax for Modern Browsers

本当はこの記事で、こういう構文を考案して紹介するつもりで書いてたんですが…さすがにもうありましたねw この記事は2014年に書かれたものなので最新と言っていいかと。

ちなみに2012年の時点での書くブラウザの対応状況はてっく煮ブログの意外と多い!? Web フォントに対応していない環境～2012 年の Web フォント事情の内容が非常に参考になった覚えがあります。面白い実験もしてましたしね。

WOFF

What’s WOFF?

WOFFファイルは名前の通り、WebでWebフォントとして使われるために作られた次世代のフォントファイル形式です。もう既にほとんどのブラウザで使えるようになってますね。

WebフォントはフォントファイルをWebから読み込まなければいけないためファイル容量が重要なんですけど、WOFFはこれまで使われてきたTTFファイルなどよりも軽量です★ 他にもフォントファイル自体のメタ情報としてライセンス情報を埋め込むことができるなど、Webでの利用に適した特徴を持ってます！

WOFF自体についてはWOFF (Web Open Font Format)の導入に詳しく解説されています。

ちなみにフォントをWebフォントとして使う場合のライセンスについてはヨモツネットのWeb フォントとライセンスに詳しいです。現状ではWOFF単独の利用は難しいため、こうした表記が必要になるでしょう。もちろん、OFLなどのオープンライセンスでWebフォントとして利用することを許可されたフォント以外をWebフォントとして使うのは不可です。

まーとは言え、IEやAndroidにも対応できるわけですからWebフォントが十分利用可能なのはわかると思います★

webフォントサービスの例

様々なサービスでWebフォントが配布されている

Webフォントを埋め込む系のサービスが推奨する埋め込み方式を見てみましょう。

Google Fontsの埋め込み方法

Google Fontsは、@font-faceをlink要素で埋め込んでいます。

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Google FontsによるWebフォントのincludeの例

Firefoxで埋め込まれたCSSを見てみると、WOFFのみが埋め込まれています。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

Google Fontsによって埋め込まれる@font-faceの例

ちなみにこれをAndroid Browserで見てみると…TTF形式のフォントを読み込んでいます。読み込むべき形式がわかっているので、ユーザーエージェントで振り分けてる感じですね。

Edge Web Fontsの埋め込み方法

Edge Web FontsはScript要素で埋め込む形です。

<script src="http://use.edgefonts.net/chunk:n4:all.js"></script>

Edge Web FontsによるWebフォントのincludeの例

そして埋め込んであるWebフォントはbase64形式のOpen Type Fontであるようです。

@font-face {
font-family:"chunk";
src:url(data:font/opentype;base64,〜);
font-style:normal;font-weight:400;
}

Edge Web Fontsによって埋め込まれた@font-faceの例

これは振り分けなくてもいいからですかね？この形をとっている理由はちょっと背景がわからないんですが(Typekitをそのまま引き継いだからかな)、とりあえずどの環境でも問題なく表示される形を選んでいるということですかね。埋め込まれるCSSにはライセンスについての表記があり、こっちで確認してねとあります。

Open Font Libraryの埋め込み方法

ついでに最近たまに使ってるOpen Font Libraryも見てみます。ここはアイコンフォントもあるし結構便利そう。これもlink要素で設置できます。

<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/chess" rel="stylesheet" type="text/css"/>

Open Font LibraryによるWebフォントのincludeの例

@font-face {
    font-family: 'Chess';
        src: url('/assets/fonts/chess/dd244e4b50bb954610bc0b2372ce2e18/f0366b5a244fa336421c9456a84be46a/ChessMedium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
      }

Open Font Libraryによって埋め込まれた@font-faceの例

実際に読み込まれるフォントはOTFファイルですね。これも同じくWOFFを使わずどの環境でも表示される形式を選択しています。Open Font Libraryに置かれているフォントは誰でも自由に使用できるOFLかPublic Domainのフォントなのでこれで問題ないというわけです。それでも容量を考えるとWOFFにそのうち移行していくのかなと思いますけど。

おわりに

2014はWeb Fontでいきましょう★

環境を限定してしまえばWebフォントの指定はかなりシンプルにできることがわかります。iOS専用やモダンブラウザ限定(IE10以上)であればWOFFのみの指定でオッケーです。そしてAndroidが4.4以上が多数派を占めるようになってしまった未来では、ついにWeb上での全てのWebフォントの指定がWOFFのみでよいということになります。いつ頃でしょうかね…w

今回の記事を書いたのはいくつか理由があるんですが、一つにはここで書いた、Webフォントの指定の洗い出しをしたかった(適正なものがなければ考案したい)ということでした。そしてさらにもう一つ、Webフォントを用いたアイコン(特にリガチャ)の指定のしかたを模索したいと考えたんですね。で、そっちは記事を分けて今書いてますw

ちなみに、先日発売されたWeb Designing 6月号ではこれらのテクニックを用いた特集ページを書かせて頂きました。作例としてそっちを参照してもらうのも良いと思います！★