🐡

Cloudflare Fonts をやってみる

2023/11/05に公開

今日は前日のBirthday Weekで発表されたCloudflare Fontsをやってみます。

Cloudflare Fonts とは

Google フォントを使用する Web サイト向けに設計された機能で、これは、Web サイト独自のオリジンから配信されるように Google Font を書き換えるため、サードパーティのフォントプロバイダーに依存する必要がなくなり、読み込みが高速化します。Cloudflare Fontsは、コードの変更やフォントのホスティングを必要とせずに、Webサイトのパフォーマンスを向上させます。
この機能を実現させるため、Cloudflare では Google Fonts をホスティングする専用ゾーンを構築し、そこからフォントが配信されます。
また、Google Fonts が埋め込まれたウェブサイトにブラウザがアクセスした場合、Google 側でフォントをダウンロードする際にユーザーのプライバシー情報（ＩＰアドレス）が収集されますが、Cloudflare Fonts の場合ＩＰアドレスなどの情報が収集されないことも大きな特徴です。

Google Fonts の仕組み

Google Fonts は Google が提供する Web 用フォントです。
https://fonts.google.com/
HTMLの中に指定された様々なフォントをクライアントブラウザが読み込むことで、任意のフォントを用いたデザインを簡単に構築できるサービスです。
とてもいいサービスなのですが、GDPR という側面において、Webにユーザーの許可なしに Google Fonts を利用すると、ユーザーのIPアドレス情報が Google へ提供されてしまうという動作をするため、問題となるケースがあります。

fonts.html

<html>
<head>
<title>Google Fonts Example</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of how to use Google Fonts in HTML.</p>
</body>
</html>

このHTMLサンプルをブラウザで読み込んだ場合、ブラウザはhttps://fonts.googleapis.com/css?family=Open+Sansをまずダウンロードします。cssファイルは以下のようになっています。

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
<snip>

次にcssの中身で指定されているwoff2ファイルをダウンロードし、指定されたフォントがブラウザで利用可能となります。
この一連の流れの中でブラウザのIPアドレスが Google 側に収集される、という仕組みです。
個人的にはGDPRがこれに罰則を科すのは理解できますが、今のWebの世界と規則があっていない気もしますが、それはまた別の話とします。

Cloudflare Fonts では上記の流れでアクセスした２つのドメイン、fonts.googleapis.com, fonts.gstatic.comを Cloudflare で CDN 利用時に管理者が指定したドメインに自動で書き換え、そのドメインからcssおよびwoff2ファイルをダウンロード可能とすることにより、プライバシーへの配慮と読み込みの高速化を実現します。

やってみる

では早速やってみます。まず普通にWebサーバを立て、CDN Proxyモードを設定します。Webサーバの準備が大変な方は以下の記事を参考にしてください。意外と簡単です。

次に以下のHTMLを作成します。

fonts.html

<html>
<head>
<title>Google Fonts Example</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of how to use Google Fonts in HTML.</p>
</body>
</html>

ホスティングが完了したらブラウザのデベロッパーツールを開いて、まずはアクセスしてみます。
まずCSSを読み込んでいることがわかります。

次に指定されたフォントファイルを読み込んでいることがわかります。

では Cloudflare Fonts を有効化します。
Speed→Optimization→Content Optimization→Cloudflare Fontsでトグルをオンにするだけです。

数秒待ってブラウザから再度アクセスします。

まずHTMLのソースを見ると先ほどあった外部CSSの読み込みがなくなり、インラインに変更されていることがわかります。

<style type="text/css">@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/greek/400/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/latin-ext/400/normal.woff2);unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/hebrew/400/normal.woff2);unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/vietnamese/400/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/cyrillic-ext/400/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/cyrillic/400/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/greek-ext/400/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Open Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/s/open-sans/5.0.15/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}</style>

/cf-fonts/s/open-sans/5.0.15/latin-ext/400/normal.woff2のように、外部ではなくCloudflareでCDNをセットアップしたドメインからwoff2ファイルを読み込んでいることがわかります。

Response Header を見てみると Cache-Status がHTIになっています。

どのくらい早くなるか？

オフ

オン

ちょびっと早くなっているようです。

今回のテスト環境ではfontsを1個、しかも日本語フォントを利用していないため差はほとんど出ていませんが、複雑になればなるほど効果の差は開いていきます。

動作しない場合

動作しない場合は以下を確認してください。
・APO(Application Performance Optimization)をオフにする
・以下のブラウザでテストしている

Chrome 36+
Edge 16+
Safari 10+
Firefox 44+
Opera 22+
IE 9+
Chrome for Android 115+
Safari on iOS 10+
Samsung Internet 5+

・CSSの書式が<link>になっており、@importを使用していない
・CSPヘッダーでstyle-srcやfont-srcを用いてフォントの読み込み先を制限していない
・オリジンでGoogle Fonts 最適最適化用独自メカニズムが作動していない