Webフォントの最適化

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つの選択…