ウェブフォント今昔物語2019.11.16 Takanori Oki @フロントエンドカンファレンス福岡2019Copyright © 2019 FOLIO, Ltd. All Rights Reserved.
View Slide
自己紹介• 株式会社FOLIO フロントエンドエンジニア• React / Nuxt.js / Web Components / etc…• フォントとFigmaが好き• 好きなフォントは新ゴ、Futura、源柔ゴシック、機械彫刻用標準書体• ウェブフォントの本書いてます2
誰でもつかえる!ウェブフォント実践マニュアル3
株式会社FOLIO4
株式会社FOLIO• 「ワクワクする投資、はじめよう!」• オンライン証券の会社• LINE Financial株式会社と共同で「LINEスマート投資」を運営• フロントエンドの技術スタックはReact, Redux, Flow, etc…5
目次• ウェブフォントって何?• 3つの視点から考えるウェブフォントのあれこれ- ユーザー- デザイナー- エンジニア• まとめ6
今回みなさんに伝えたいこと
Xウェブフォントはこわくない!8
ウェブフォントって何?
X10ここに書いてあるよ!
What is“Web Font”?11サーバーにフォントデータをアップロードサーバーからフォントデータを取得して表⽰
昔のウェブフォント12フォントデータが重い日本語フォントのバリエーションが少ない
日本語フォントが重い理由• 文字数が多い• グリフが複雑13
今のウェブフォント• 日本語ウェブフォントはたしかに重いけど実装を工夫することでそれを回避できるようになってきた- 「エンジニア」のところで詳しく解説• 日本語フォントのバリエーションが格段に増えた- 日本語フォントを取り扱うウェブフォント配信サービスの増加- Google Fonts、Adobe Fonts、TypeSquare、FONTPLUS、etc…14
3つの視点から考えるウェブフォントのあれこれ
3つの視点16エンジニア ユーザー デザイナー
Xユーザー目線17
Xよくあるユーザーの声18
ユーザー目線「読み込みが遅い、フォントデータが重い、ムダに通信量を消費しないでほしい」19
ユーザー目線• 読み込みが遅い- ユーザーに遅さを感じさせない実装をする必要がある、ごめん• フォントデータが重い- これはまじごめん致し方ない、これでも前より軽くなってる• ムダに通信量を消費しないでほしい- Google Fonts使えばユーザーの通信量をムダにしない20
ウェブフォントがユーザーに提供できること• 可読性の向上- フォントと可読性は密接に関係している- ディスレクシア(読字障害)や弱視などの障害を持つ人にとって読みやすいフォントを選択することは非常に重要• 株式会社モリサワがいくつかレポート出してるので、興味がある人は読んでみて- https://www.morisawa.co.jp/fonts/udfont/study/21
Xデザイナー目線22
デザイナー目線• デザインの幅が広がる- フォントで全体の印象が大きく変わる- 全体のデザインを考える上で欠かせない要素• デバイスやOSに関係なく同じデザインを提供できる- そもそも、特定のOSにしか搭載されてないフォントでデザイン考えるのおかしくない?23
デザイナー目線 デザイナーにメリットしかない!24
注意点• ライセンスでウェブフォントとしての利用が禁止されてる場合があるので注意が必要• ライセンス周りはかなりややこしいので配信サービスを使うのが安全• ウェブフォントとして使うには「フォントの改変」「再配布」の許可が必要25
Xエンジニア目線26
エンジニア目線「重い。ちらつく。なんかよくわからない。時間かけたくない。必要あるの?」27
エンジニア目線Googleが書いている「ウェブフォントの最適化」を実践するhttps://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja28
ウェブフォントで使われる技術• WOFF2形式での圧縮• ダイナミックサブセット、ユニコードサブセット• Font Loading API• CSSのfont-displayプロパティ• Service Workerを用いたキャッシュ戦略• 29
ウェブフォント圧縮形式の歴史30WOFFWebOpenFontFormat2009年に公開されたウェブフォント用の圧縮形式。zlibを使用して圧縮されている。TTFTrueTypeFont一般的なフォントファイル。自前で圧縮する必要がある。WOFF2WebOpenFontFormat2Brotliという圧縮アルゴリズムを使用した新しい圧縮形式。WOFFと比較して約30%軽い。
Noto Sans CJK JP Regularのサイズ比較31TTFWOFFWOFF2ファイルサイズ0MB 5MB 10MB 15MB 20MB10.7MB13.7MB16.4MB
ダイナミックサブセット• フォントを動的にサブセットする手法• メリット- そのページで使われてる文字しかダウンロードされないのでフォントデータを軽くできる• デメリット- ページ読み込み時にJavaScriptを実行するので環境によっては使えない可能性がある- SPAや動的に表示が変わるUIと相性が悪い32
FOUTを抑止する方法33
FOUT• Flash of Unstyled Text- ウェブフォントのスタイルがあたってない文字がチラ見えしてしまうこと• 対策を怠るとプロダクトの体験が悪くなる• デザイナーとコミュニケーションをとりベストな方法を探す!34
FOUTの仕組み35リクエストHTMLダウンロードDOM構築 CSSOM構築 ファーストペイント テキスト表示CSSダウンロード フォントダウンロードこの間テキストにデバイスフォントが適用されて見える
主な解決策• Font Loading APIでフォントの読み込みを監視、読み込み完了するまでローディング画面を表示するなどの制御を加える• CSSのfont-displayプロパティで表示のタイミングをコントロールする36
Font Loading APIでフォントのロードを監視37
まとめ
Xウェブフォントはユーザーにとってメリットがある39
X最新の技術を使って使いにくさ、表示の問題を解決できる仕組みが整いつつある40
X日本語ウェブフォントを広めていきましょう!41
Thank you.