ウェブフォント分析ツール

GoogleのCDN（fonts.googleapis.com）からGoogle Fontsを含めると、ユーザーのブラウザがGoogleのサーバーにリクエストを送信し、IPアドレスが明らかになります。2022年1月、ミュンヘン地方裁判所（LG München I）は、明示的な同意なしにGoogle Fontsを使用するウェブサイトがGDPR（DSGVO）に違反するとの判決を下し、原告に100ユーロの損害賠償を認めました。この判決により、IPアドレスはGDPRの下で個人データとみなされ、同意なしに米国企業（Google）に転送することはGDPR第44条に違反することが確立されました。修正するには：フォントをセルフホストするかBunny Fontsのようなコンプライアンスに準拠した代替を使用してください。

google-webfonts-helperウェブツールを使用してフォントファイル（WOFF2形式推奨）とCSSをダウンロードしてください。フォントファイルをサーバーにアップロードし、CSS @font-face宣言を追加し、Google Fontsの<link>タグを削除してください。不可視テキストのフラッシュ（FOIT）を防ぐために常にfont-display: swapを追加してください。または、Bunny Fonts（fonts.bunny.net）を使用してください。Google Fontsのドロップイン置き換えAPIを提供しており、同じフォントファミリー、同じAPIのURL形式を持ちながら、EUのインフラとIPのログなしを実現しています。

font-display: swapはブラウザにフォールバックのシステムフォントを使用してすぐにテキストをレンダリングし、カスタムフォントが読み込まれた後に切り替えるよう指示します。これがないと、フォントの読み込み中にブラウザがテキストを完全に非表示にする可能性があり（FOIT）、LCP（Largest Contentful Paint）スコアが遅延してCore Web Vitalsが悪化します。すべての@font-face宣言にfont-display: swapを追加し、Google FontsのURLには&display=swapを追加してください。

フォントプリロード（<link rel="preload" as="font" href="..." crossorigin>）はブラウザにHTMLの残りを解析する前に重要なフォントファイルを取得するよう指示します。これによりレイアウトシフト（CLS）と不可視テキストの可能性が低下します。ファーストビューのフォントにのみプリロードを使用してください。すべてのフォントをプリロードすると帯域幅が増加します。フォントCDNドメインへの接続を早期に確立するために<link rel="preconnect">とペアで使用してください。セルフホストフォントの場合、WOFF2ファイルのプリロードが最も効果的です。

Adobe Fontsはフォントの読み込み時にユーザーデータをAdobeのサーバーに送信します。Adobeが欧米プライバシーフレームワーク認証とDPA（データ処理契約）を提供しているため、高リスクではなく中リスクです。ただし、プライバシーポリシーにAdobe Fontsを開示し、クッキー同意に追加する必要があるかもしれません。Adobeは欧州地域のフォント配信を提供していますが、ポストSchrems IIの法律の下での米国データ転送の法的地位はまだ争われています。最大限のコンプライアンスのためには、セルフホスティングが最も安全な選択肢です。