Cloudflare Fonts は、Google Fonts ↗ を使うウェブサイト向けの機能です。Google Fonts をサイト自身のオリジンから配信するように書き換え、サードパーティのフォント提供元に依存せずに済みます。コード変更やフォントの自己ホスティングなしで、サイトの性能とユーザーのプライバシーを改善します。
Cloudflare Fonts は、ウェブページの HTML を書き換えます。Google Fonts のリンクを削除し、インライン CSS に置き換えます。この CSS には、Google のサーバーではなく、自身の Cloudflare ゾーンへのフォントリンクが含まれます。フォントファイルは Cloudflare のインフラ経由で自身のドメインから配信され、性能の最適化とプライバシーの向上につながります。
Cloudflare Fonts は、Unicode-range のサブセット化と WOFF または WOFF2 形式に対応するブラウザーで利用できます。対象は次のとおりです。
Chrome 36+
Edge 16+
Safari 10+
Firefox 44+
Opera 22+
IE 9+
Chrome for Android 115+
Safari on iOS 10+
Samsung Internet 5+ドメイン全体で Cloudflare Fonts を有効にする手順です。
-
Cloudflare ダッシュボードで、Speed > Settings ページを開きます。
Settings を開く ↗ -
Content Optimization に移動します。
-
Cloudflare Fonts のトグルを On にします。
Cloudflare Fonts は強力なフォント最適化を提供しますが、次の制限を把握しておいてください。
- フォント変換: 現時点で、Cloudflare Fonts が変換できるのは Google Fonts だけです。
- APO との互換性: Automatic Platform Optimization（APO）が有効なときは、Cloudflare Fonts は動作しません。Cloudflare APO も、同様の方法で Google Fonts を自動最適化します。
- CSS import: Cloudflare Fonts が対応するのは Google Fonts の
<link>設定だけです。CSS の@import方法はサポートしません。 - CSP ヘッダー: Cloudflare Fonts は Content Security Policy（CSP） ヘッダーを変更しません。
style-src↗ によるインラインスタイルの制限や、font-src↗ によるサイト自身のオリジンからのフォント制限など、一部の CSP 設定では Cloudflare Fonts が動作しなくなることがあります。 - フォールバック: 特定のページを Cloudflare Fonts がサポートしない場合は、Google Fonts の利用にフォールバックします。