Webフォントの最適化

Webフォントの最適化01「FOIT・FOUT」にて、Web フォントの課題の一つである FOUT（フォントが入れ替わる際のチラツキ）を紹介しました。 Web フォントの利用の際、切り替わりによってテキストの行数が変化することなどにより、ページのレイアウトが変化してしまいます。これにより、テキストの読み取りの阻害や誤クリックなどのユーザー体験の低下や、CLS（Cumulativ…

unicode-range は指定することで、そのフォントで表示する文字の Unicode 範囲を指定することができます。 Webフォントのデザインテクニック05「混植してみよう」では、これを利用して混植表示を試みましたが、最適化でも利用することがあります。 unicode-range は、指定した範囲の文字が出てくるまで、そのフォントが読み込まれることはありません。 例えば、…

Web フォントの利用において、フォントファイル自体の最適化をする際、サブセット化は一番最初に検討される方法です。 サブセット化とは、必要なグリフだけを収録したフォントファイルを生成することです。 その際、不要なグリフを削除するだけでなく、GSUB・GPOS や、他の様々なテーブルも再構築する必要があります。 Web フォント配信サービスでは、利用しているページを解析し、動的に…

Web フォントには、いくつかのファイル形式がありますが、現在ではほとんどのケースで WOFF または WOFF2 フォーマットを使うのが良いでしょう。 WOFF / WOFF2 の主な違いは圧縮アルゴリズムで、WOFF2 のほうが圧縮率が高いとされています。２つのフォーマット間には互換性がないため、WOFF2 を WOFF として、もしくは WOFF を WOFF2 として読…

本記事では、前回の記事の知識を前提としています。以下からお読みいただけます。 前回の記事：Webフォントの最適化01「FOIT・FOUT」 CSS の @font-face ルールの中に、font-display という記述子があります。このプロパティではフォントデータの読み込みが完了するまでの間、どのようにテキストを表示するかを定義できます。 font-display には、…

Webフォントの概要03「Webフォントの課題」にて、日本語フォントはフォントデータの容量が大きく、ページの表示に時間がかかるなどの課題があることを説明しました。本シリーズでは、この詳細と最適化手法を紹介します。 まずは、FOIT・FOUTについてです。 Web フォントを使用すると、フォントデータの読み込みに時間がかかります。その間のテキストの扱いは、大まかに以下の2つの選択…