Web Fontのいま

Web Fontのいまバイドゥ社内勉強会　秋葉ちひろ

2012.7.27

2002年から策定が開始

2011年10月4日にW3Cの仕様書でワーキングドラフト（CSS Fonts Module Level 3）

ブラウザの実装がやっと始まって実用レベルに

Webフォントについて

今までは、自分のパソコンに入っているフォントしか表示できなかった

Webフォントについて

MSゴシック/Windows

新ゴ（モリサワ）・明朝オールド（イワタ）/Windows

くそ重い

海外では先行して発展

文字数が少なく、アルファベット（大文字・小文字）、数字、記号、などあわせてもせいぜい100～200KB

オリジナルフォントも作りやすい

海外では先行して発展

文字数が多すぎる（漢字が鬼）

教育漢字（小学6年生までに習う漢字）だけだとしても1,006字

常用漢字だと2136字

漢検1級の対象漢字となると約6,000字

日本では難しい理由

全部含めるとフォントファイルは10MBにも…

10MB→光回線でも少々しんどい

イーモバ・Wimax、3Gだとストレスになるだけ

日本では難しい理由

昔ながらのフォントベンダーさんの頭がカタい

モリサワ：484書体・52,500円/年

イワタ：1書体あたり・10,500円～

フォントワークス： 1書体あたり・18,900円～

モトヤ

日本では難しい理由

昔ながらのフォントベンダーさんの頭がカタい

われわれは紙で勝負だ！

Webで表示できるようになったらコピーされまくりじゃないか！

ライセンス料はどうするんだ！

日本では難しい理由

本格的サービス開始

フォントベンダーを巻き込んだWebフォントサービス

イワタ・フォントワークス・モトヤなど

モリサワも加わって約600書体

入会金：10,500円、月額1,050円～

本格的なサービス開始

本格的サービス開始

モリサワが独自に始めたサービス

PVによって価格が変わる

30万PV：4,200円/3ヶ月

本格的なサービス開始

更新のコスパがよい

「Webの特性」と「デザイナーのエゴ」の両立

レスポンシブにもやさしい

メリット

お金がかかる（だいたい月に1,000～2,000円程度）

表示速度

フォントファイルが重いので閲覧できるまでに時間がかかる

デメリット

1.使っている文字のみをサブセット化

2.その都度jsで判断

表示方法

HTMLとCSSを送る

使われている文字のみのフォントファイルを返す

1.使っているフォントのみをサブセット化

今日は暑いですね。

いすはねで暑今日。

無駄な文字が省かれるのでフォントファイルは軽くなる

Webサイト全体でもおそらく2,000文字ぐらい→200KBぐらい

ページ遷移をしても、一度フォントファイルを読み込んでいるのでストレスなく見れる

1.使っているフォントのみをサブセット化

jsを読みこませるだけなので導入は簡単

その都度どの文字を使っているのか判定して返す（？）ので、時間がかかる

2.その都度jsで判断

jsを読みこませるだけなので導入は簡単

その都度どの文字を使っているのか判定して返す（？）ので、時間がかかる

2.その都度jsで判断

font+さんからAPIが提供されていて、最初のデバイスフォントを呼び出さずに、「消えた状態」→「Webフォント」も可能に

パッと見たときに文字が表示されていない状態になる

2.その都度jsで判断

ユーザーのことを考えるといまいち使う気になれない

ちらつきもいやだし、文字の表示を待つのもいや

2.その都度jsで判断

使えるところはどんどん使おう！

ナビゲーションやカテゴリタイトルといった、静的な部分だけサブセット化して使う

動的なコンテンツはデバイスフォントを使う

いまの時点での最良の方法