Cloudflare Fontsとは
Cloudflare Fontsは、Google Fontsを使用するウェブサイト向けに設計された機能で、Google FontsをCloudflareから配信するように書き換えることで、ウェブサイトのパフォーマンスとユーザーのプライバシーを向上させる
そのWebサイト自体のドメインからフォントを読み込むため、DNSルックアップとTLS接続オーバーヘッドの最小化が実現できる
詳しいことはこのあたりに
Introducing Cloudflare Fonts. Enhance privacy and performance for websites using Google Fonts by loading fonts from their own origin. Improve user privacy, enhance site performance, and simplify the process. No need for code changes. Simply enable Cloudflare Fonts in your dashboard.
特定の条件下で仕様違反CSSを配信する
ところがこのCloudflare Fonts、残念ながら特定の条件下で仕様違反CSSを配信してしまう
Cloudflare Fonts works for one font on my site but not the other. I belive the issue is the generated CSS looks like this: @font-face {font-family:Brygada 1918;font-style:normal;font-weight:400;src:... The font name (Brygada 1918) contains whitespace but is not quoted, which makes that @font-face rule invalid.
ここで議論されているように、font-familyプロパティの値が引用符で囲まれていないために、フォントの名前によっては無効なCSSとなってしまう
実際にCloudflare Fontsから配信されるNoto Sans JPとM PLUS 1pのCSSの一部
@font-face {
font-family: Noto Sans JP;
}@font-face {
font-family: M PLUS 1p;
}前者は仕様上、非推奨であるもの許容される
ところが、後者は仕様上、許容されない
違いは、各単語の先頭に数字があるかないか
font-familyプロパティの値としてフォントファミリの名前を指定する場合は、引用符なしの場合、<string>ではなく<custom-ident>となる
しかしながら、<custom-ident>は各単語の先頭に数字を持ってくることを許容しない
そのため、M PLUS 1pのようなフォントではこの仕様に違反することになってしまう
結果的にフォントが読み込まれなくなってしまう
いつ修正されるかも不明
先ほどのCloudflare Communityでも議論されていたが、Cloudflare Fontsは長期間メンテナンスされておらず、この問題がいつ修正されるかわからない状態
試みとしては素晴らしいと思うので、残念ではある