コンテンツにスキップ

Cloudflare Fonts

ベータ

Cloudflare Fontsは、Google Fontsを使用するウェブサイト向けに設計された機能です。Google Fontsをウェブサイトの独自のオリジンから配信されるように書き換え、サードパーティのフォントプロバイダーに依存する必要を排除します。Cloudflare Fontsは、コードの変更やフォントの自己ホスティングなしで、ウェブサイトのパフォーマンスとユーザーのプライバシーを向上させるように調整されています。

Cloudflare Fontsの仕組み

Cloudflare Fontsは、ウェブページのHTMLを書き換えることによって機能します。Google Fontsのリンクを削除し、インラインCSSに置き換えます。このCSSには、Googleサーバーではなく、独自のCloudflareゾーンからのフォントへのリンクが含まれています。これにより、フォントファイルがCloudflareのインフラストラクチャを通じてあなたのドメインから配信され、パフォーマンスが最適化され、ユーザーのプライバシーが向上します。

ブラウザのサポート

Cloudflare Fontsは、Unicode範囲のサブセット化と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を有効にするには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントとドメインを選択します。
  2. Speed > Optimization > Content Optimizationに移動します。
  3. Cloudflare FontsのトグルをOnに切り替えます。

制限事項

Cloudflare Fontsは強力なフォント最適化機能を提供しますが、その制限事項を理解しておくことが重要です：

  • フォント変換: 現在、Cloudflare FontsはGoogle Fontsの変換のみをサポートしています。
  • APO互換性: Cloudflare Fontsは、Automatic Platform Optimization (APO)が有効な場合には動作しません。Cloudflare APOは、Google Fontsを同様の方法で自動的に最適化します。
  • CSSインポート: Cloudflare Fontsは、Google Fontsのための<link>セットアップのみに対応しており、CSSの@importメソッドはサポートしていません。
  • CSPヘッダー: Cloudflare Fontsはコンテンツセキュリティポリシー (CSP)ヘッダーを変更しません。特定のCSP設定により、Cloudflare Fontsが機能しなくなる場合があります。例えば、style-src ↗を通じてインラインスタイルに制限をかけたり、font-src ↗を通じてサイトの独自のオリジンからのフォントを制限したりすることです。
  • フォールバックメカニズム: Cloudflare Fontsが特定のページをサポートしない場合、Google Fontsを使用するように優雅にフォールバックします。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings