css font-display @font-face

Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。

まずはフラグを有効にする。

FIrefox のアドレス欄へabout:configと入力し、設定画面を開く。
そこでlayout.css.font-display.enabledを検索し、値をtrueへ。これで機能が有効となる。

Chrome の開発版ではすでに導入されているらしく、下記記事が非常に参考になった。

やはりFOUTをネイティブの機能で解決することが期待されるよう。
今までは主に Web Font Loader を導入したり、 あと Adobe Blank なんてのもあった気が…。
とにかく涙ぐむしい努力をしてきたので人類にとって、これは待望の機能かなと。

現時点での実装はスペックの推奨通りでクロームと同様のよう。
設定値はfallbackがベストで、妥協してblockといった感じだろうか。パフォーマンスとユーザビリティの両方にバランスよく配慮できそうである。

1
2
@font-face {
font-family: 'Waiting for the Sunrise'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Waiting for the Sunrise'), local('WaitingfortheSunrise'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff2') format('woff2'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff') format('woff'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.ttf') format('truetype');}

その他の値も少しの違いながら明確に用途がわかれそうなので、なかなかよくできている感じ。
will-changeのように必要そうな部分へは先行導入しておき、ブラウザの対応を待ってもいいかと。