ウェブフォントが重いときにチェックしたい3つのポイント
2018年12月5日
これは ウェブフォントアドベントカレンダー 5日目の記事です。
「ウェブフォントは重いから良くない」みたいな意見が散見されますが、それは使い方を誤っているだけのことがほとんどです。
正しい使い方をすればそこまで重く感じることはないでしょう。（それでもたしかに日本語フォントは重いですが。）
ウェブフォントが重いな、と感じたら次の3つのポイントを重点的にチェックしましょう。
1. サブセット化してない
ウェブフォント使うときはきちんとサブセット化しましょう。これで大きくファイルサイズを減らすことができます。
サブセット化とは、もとのフォントファイルからよく使う文字だけ抜き出して新しいフォントファイルを作ることを指します。
技術ブログとかであれば**「ひらがな+かたかな+記号+第一水準漢字」**でサブセット化しておけば大丈夫だと思います。
subfont というライブラリを使ってページを解析してサブセット化することもできます。紹介記事書きます。
2. woff2を使ってない
ウェブフォントとして使うフォントファイルは woff2 形式に変換して使いましょう。
https://www.w3.org/TR/WOFF20ER/
もともとwoff形式のフォントがウェブフォントとして使われていましたが、woff2はwoffよりも10%〜30%もファイルサイズを小さくすることができます。
残念ながらIEではwoff2がサポートされていないので、もしIEでもウェブフォントを使用する必要があればwoff形式のフォントも用意する必要があります。
拡張子の話はどこかで詳しく書きます。
3. preload してない
ウェブフォントが遅く感じる理由の一つに、フォントファイルのロード開始が遅いということがあります。
ウェブフォントはリソースのパスがCSSファイルに書かれているため、そのCSSファイルが読み込まれてからロードが開始されます。
フォントのダウンロード中はテキストの表示がブロックされたりブラウザデフォルトのフォントが表示されたりするので、ちらつきが生じフォントのロードが遅く感じるのです。
preload を使えばHTMLをパースした段階でコンテンツを先読みすることができるので、CSSファイルの読み込みを待たずにフォントをダウンロードすることができます。
https://gist.github.com/takanorip/957e64cf597a5b6b5fa11b6d94150357
Preloading content with rel="preload"
_The preload value of the link element's rel attribute allows you to write declarative fetch requests in your HTML head…_developer.mozilla.org
さいごに
この本に詳しく載ってるらしいですよ。
誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))
_Amazonで大木 尊紀の誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。大木 尊紀作品ほか、お急ぎ便対象商品は当日お届けも可能。また誰でもつかえる…_www.amazon.co.jp
