1. 本ページの目的
本ページに Google Fonts を使ってみる。フォントファイルをサブセット化して利用する。
2. 導入手順
(1) Browse Fonts - Google Fonts にアクセスする。
(2) 今回は「RocknRoll One」を利用することとし、該当するフォントをクリックする。
(3) 同ページ右上の [Download family] をクリックしてファイルをダウンロードする。
(4) サブセットフォントメーカー を使って、フォントファイルをサブセット化する。
- 元のファイル 5,249[KB] が 41[KB] になった。
(5) 生成したファイルを元にして、WOFFコンバータ で .woff2 ファイルを生成する。
(6) なるべく早くフォントファイルをダウンロードしたいので、<link rel="preload"> を記述する。
<link rel="preload" as="font" href="RocknRollOne-Regular_subset.woff2" type="font/woff2" crossorigin="anonymous">
font-display: optionalの場合に、これを記述するとfont-display: optionalのデフォルトの動作である「ブロック期での不可視の代替フォントでの描画」が行われないようになり、レイアウトシフトが起きない[1]。
(7) 以下のCSSを記述する。
@font-face {
font-family: RocknRollOneSubsetFont;
font-display: swap;
src: url(RocknRollOne-Regular_subset.woff2) format("woff2");
}
(8) このフォントを適用するCSSクラスを記述する。
.g-font {
font-family: RocknRollOneSubsetFont, sans-serif;
}
3. デモ
わたくしといふ現象は 仮定された有機交流電燈の ひとつの青い照明です （あらゆる透明な幽霊の複合体） 風景やみんなといつしよに せはしくせはしく明滅しながら いかにもたしかにともりつづける 因果交流電燈の ひとつの青い照明です （ひかりはたもち その電燈は失はれ） これらは二十二箇月の 過去とかんずる方角から 紙と鉱質インクをつらね （すべてわたくしと明滅し みんなが同時に感ずるもの） ここまでたもちつゞけられた かげとひかりのひとくさりづつ そのとほりの心象スケツチです
「春と修羅（宮沢賢治）」より引用
4. パフォーマンス
Chrome DevTools [Performance]
CPU:4x slowdow
- いろいろなリソースは読み込ませずに実行した。
- Load のタイミングくらいにしか影響はない。
Chrome DevTools [Lighthouse]
Device:Mobile
5. メモ
font-display: optionalと<link rel="preload">の組み合わせも試したが、100ms 以内でのダウンロードがなかなか達成されず、Webフォントで表示されなかった。一旦キャッシュしてしまえば、次回からは Webフォントで表示はされる。