Cloudflare Fontsとは
Cloudflare Fontsは、Google Fontsを使用するウェブサイト向けに設計された機能で、Google FontsをCloudflareから配信するように書き換えることで、ウェブサイトのパフォーマンスとユーザーのプライバシーを向上させる
そのWebサイト自体のドメインからフォントを読み込むため、DNSルックアップとTLS接続オーバーヘッドの最小化が実現できる
詳しいことはこのあたりに
Introducing Cloudflare Fonts. Enhance privacy and performance for websites using…
blog.cloudflare.com
特定の条件下で仕様違反CSSを配信する
ところがこのCloudflare Fonts、残念ながら特定の条件下で仕様違反CSSを配信してしまう
https://community.cloudflare.com/t/cloudflare-fonts-doesnt-work-if-font-has-space-in-name/572830ここで議論されているように、font-familyプロパティの値が引用符で囲まれていないために、フォントの名前によっては無効なCSSとなってしまう
実際にCloudflare Fontsから配信されるNoto Sans JPとM PLUS 1pのCSSの一部
CSS
@font-face {
font-family: Noto Sans JP;
}CSS
@font-face {
font-family: M PLUS 1p;
}前者は仕様上、非推奨であるもの許容される
ところが、後者は仕様上、許容されない
違いは、各単語の先頭に数字があるかないか
font-familyプロパティの値としてフォントファミリの名前を指定する場合は、引用符なしの場合、<string>ではなく<custom-ident>となる
font-family は CSS のプロパティで、選択した要素に対して、フォントファミリー名や一般ファミリー名の優先順位リストを指定することができます。
developer.mozilla.org
しかしながら、<custom-ident>は各単語の先頭に数字を持ってくることを許容しない
は CSS のデータ型で、識別子として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコン…
developer.mozilla.org
そのため、M PLUS 1pのようなフォントではこの仕様に違反することになってしまう
結果的にフォントが読み込まれなくなってしまう
いつ修正されるかも不明
先ほどのCloudflare Communityでも議論されていたが、Cloudflare Fontsは長期間メンテナンスされておらず、この問題がいつ修正されるかわからない状態
試みとしては素晴らしいと思うので、残念ではある