ウェブフォントが重いときにチェックしたい3つのポイント

created at:

2018-12-05

tags:

「ウェブフォントは重いから良くない」みたいな意見が散見されますが、それは使い方を誤っているだけのことがほとんどです。

正しい使い方をすればそこまで重く感じることはないでしょう。（それでもたしかに日本語フォントは重いですが。）

ウェブフォントが重いな、と感じたら次の3つのポイントを重点的にチェックしましょう。

1. サブセット化してない

ウェブフォント使うときはきちんとサブセット化しましょう。これで大きくファイルサイズを減らすことができます。

サブセット化とは、もとのフォントファイルからよく使う文字だけ抜き出して新しいフォントファイルを作ることを指します。

技術ブログとかであれば**「ひらがな+かたかな+記号+第一水準漢字」**でサブセット化しておけば大丈夫だと思います。

subfont というライブラリを使ってページを解析してサブセット化することもできます。紹介記事書きます。

ウェブフォントとして使うフォントファイルは woff2 形式に変換して使いましょう。

もともとwoff形式のフォントがウェブフォントとして使われていましたが、woff2はwoffよりも10%〜30%もファイルサイズを小さくすることができます。

残念ながらIEではwoff2がサポートされていないので、もしIEでもウェブフォントを使用する必要があればwoff形式のフォントも用意する必要があります。

拡張子の話はどこかで詳しく書きます。

ウェブフォントが遅く感じる理由の一つに、フォントファイルのロード開始が遅いということがあります。

ウェブフォントはリソースのパスがCSSファイルに書かれているため、そのCSSファイルが読み込まれてからロードが開始されます。

フォントのダウンロード中はテキストの表示がブロックされたりブラウザデフォルトのフォントが表示されたりするので、ちらつきが生じフォントのロードが遅く感じるのです。

preload を使えばHTMLをパースした段階でコンテンツを先読みすることができるので、CSSファイルの読み込みを待たずにフォントをダウンロードすることができます。

この本に詳しく載ってるらしいですよ。