2018年のウェブフォントについて

少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。

他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。

回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。

@font-face {
  font-display: optional;
  font-family: "Noto Sans Japanese";
  src: url("https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2") format("woff2");
}

鍵になるのはoptionalという値になる。この値にしておくと100msと少しの間ダウンロードしてみた結果、ユーザー・エージェントが回線が遅いと判断した場合はフォントをダウンロードしなくなるため、数十秒後に突然フォントが切り替わり、読んでいた位置がどっかにいってしまうなどということがなくなる。

このように使い分けると良いだろう。