2014年版Webフォントの
使用方法とこれまでの歩み

酒井優(@glatyou)

1. はじめに
2. 自己紹介
3. Webフォントに使われるフォント
4. Webフォントの実装方法
5. アイコンになるフォント
6. まとめ

はじめに

Webフォントの利用は広がってきている

Webデザイナーやフロントエンドの人も
実際に使うことが増えてきているはず

Webフォントには短いながら歴史もあり
実装方法や利用のされ方の
ベストプラクティスも変化している

このセッションでは

時代とともに変わってきたWebフォントと
その実装方法や使い方を解説する

自己紹介

酒井 優(@glatyou)

• フリーランスのWeb制作者
• WEBCRE8.jp - Web制作者向けブログ
• HTML5KARUTA - HTML5学習ゲームツール

Webフォントに使われる
フォントファイル

Webフォントとして使われるフォントにはいくつかのファイル形式がある

代表的なフォントの形式

• TTF
• OTF
• EOT
• WOFF
• SVG(今回は省きます)

TTF

OTF

EOT

WOFF

容量の比較

今後WebフォントはWOFFに
置き換わっていく(はず)

Webフォントの入手方法

通常のフォントを入手し
ツールで変換する

Webフォントのライセンス

• OFL(SIL Open Font License)や著作権フリーの
  フォントを用いる
• サーバーに設置することやサブセット化、
  ファイル形式の変換等が可能かどうかをチェックする

必要なフォントがないとき

気に入ったのにライセンス的に
Webフォント化できない、いいのがない

そんなときは自作して
しまうというのもアリ

デモ

Webサービス「Glyphter」を用いて自作の
フォントの各ファイル形式を用意する
Glyphter: The SVG Font Machine - http://glyphter.com/

Blcks

ABCDEFG
HIJKLMN
OPQRSTU
VWXYZ

Webフォントの実装方法

Webフォントを使用する2つの方法

アップロードして埋め込む方法

1. フォントを入手する
2. サーバーにアップロードする
3. CSSで@font-faceを設定する
4. CSSでfont-familyを指定する

@font-faceルール

フォント名やフォントの定義に対応する
フォントファイルを指定する@ルール

記述子

@font-face {
    font-family: Blcks ;
    src: local(Blcks),
    url(Blcks.woff) ;
    font-weight: bold ;
    unicode-range: U+0040-0060 ;
}

• 複数の同じ記述子がある場合は最後のものが適用される
• src記述子内で複数のフォントが定義されている場合は有効な最初のフォントが適用される

ここで言うfont-familyは
自由につけ、変数のように使える

@font-face {
    font-family: Japanese text ;
    src: url(../blcks/NotoSansJP-Regular.otf),
        local(Meiryo);
}

.slides li{
    font-family: "Lato", "Japanese text", sans-serif;   
}

Bulletproof 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');
}

今どきのやりかた

その後さまざまな環境の変化を
踏まえて改良が重ねられてきている

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

デモ

自作フォント「BLCKS」の表示

@font-face {
    font-family: Blcks ;
    src: url("../blcks/Blcks.woff") format("woff"),
    url("Blcks.ttf") format("truetype") ;
}

.slides .blcks {
    font-family: Blcks ;
}

フォント配信サービスを使う

link要素やscript要素で直接埋め込む

デモ

BracketsとEdge Web Fonts

手軽に使うなら
Brackets & Edge Web Fonts

アイコンになるフォント

フォントの新たな使い道として
アイコンフォントがある

アイコンフォントのメリット

• スケーラブル
• スタイルの追加が容易
• 画像を減らせる

Webフォントはアイコンとしての
利用にマッチしている

アイコンフォントの種類

• Dingbats
• アイコンフォント
• リガチャアイコンフォント

Dingbats

古くからあるフォント形式の
アイコンリソース

アイコンフォント

Webフォントとして利用する
ために作られたDingbatsの一種

ただし、残念ながら
セマンティックではない

リガチャアイコンフォント

リガチャ機能を応用した
アイコンフォント

特に表示領域の狭い
モバイル環境などでオススメ

デモ

Ligature Symbolsを用いた作例
Ligature Symbol Font Demo - CodePen

まとめ

パフォーマンスやデザインの問題を
フロントエンド技術が解決する

マルチプラットフォーム&マルチデバイス
環境にWebフォントを

より早く、より美しいWebサイトのために

ご清聴ありがとうございました

参考資料

• 次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？ - フォントブログ http://blog.petitboys.com/archives/woff.html
• WOFF (Web Open Font Format)の導入 - 血統の森 web実験小屋 - http://momdo.s35.xrea.com/web-html-test/CSS3-memo/introducing-woff.html
• CSS Fonts Module Level 3 （日本語訳） - http://www.hcn.zaq.ne.jp/___/WEB/css-fonts-ja.html
• Can I use... Support tables for HTML5, CSS3, etc - http://caniuse.com/#search=font