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

酒井優(@glatyou)

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

はじめに

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

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

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

このセッションでは

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

自己紹介

酒井 優(@glatyou)

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

WEBCRE8.jp

HTML5KARUTA
http://roadstohtml5.com/html5karuta/
HTML5KARUTA Game for Web
http://roadstohtml5.com/html5karuta/game/

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

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

代表的なフォントの形式

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

TTF

正式名称TrueType Font
開発元Apple、Microsoft
特徴デバイスフォントとして
使われるポピュラーな形式

OTF

正式名称OpenType Font
開発元Adobe、Microsoft
(Appleも賛同)
特徴TTFの拡張
フォントの機能が追加
(CSSのfont-feature-settingsなどに相当)

EOT

正式名称Embedded OpenType
開発元Microsoft
特徴IE4から採用されている
W3Cからは不採用

WOFF

正式名称Web Open Font Format
開発元Opera、Microsoft、Mozilla
特徴圧縮され軽量
ライセンス等のメタ情報を持つ
モダンブラウザはほぼ対応
(IEは10、Androidは4.4から)

容量の比較

Blcks.ttf3KB
Blcks.eof3KB
Blcks.woff2KB
Blcks.svg10KB

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

Webフォントの入手方法

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

sfnt2woffフォント作成コマンドツール
http://people.mozilla.org/~jkew/woff/
WOFFコンバータ
http://opentype.jp/woffconv.htm
Font Squirrel
http://www.fontsquirrel.com/tools/webfont-generator

Webフォントのライセンス

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

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

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

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

デモ

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

Blcks

ABCDEFG
HIJKLMN
OPQRSTU
VWXYZ

Glyphter
http://glyphter.com/

Webフォントの実装方法

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

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

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

@font-faceルール

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

記述子

font-familyフォント名を定義
src対応するリソースを指定
各スタイル対応する各スタイルを定義(font-weight、font-feature-settingsなど)
unicode-range適用されるグリフの種類を限定
@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要素で直接埋め込む

Google Fonts
https://www.google.com/fonts
Adobe Edge Web Fonts
https://edgewebfonts.adobe.com/
Open Font Library
http://openfontlibrary.org/

デモ

BracketsとEdge Web Fonts

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

アイコンになるフォント

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

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

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

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

アイコンフォントの種類

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

Dingbats

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

アイコンフォント

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

Font Awesome
http://fortawesome.github.io/Font-Awesome/
❍ IcoMoon
http://icomoon.io/

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

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

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

Symbolset
https://symbolset.com/
Ligature Symbols
http://kudakurage.com/ligature_symbols/

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

デモ

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

まとめ

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

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

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

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

参考資料