☰

Google Fontsのリンクまたはインポートを含めるか？質問する

tag-icon • tag-icon fonts webfonts google-webfonts
Google Fontsのリンクまたはインポートを含めるか？質問する

ページに Google Fonts を含めるための推奨される方法は何ですか?

  1. <link>タグ経由
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  2. スタイルシートのインポート経由
    @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
  3. 使用方法Web フォント ローダー

ベストアンサー1

90% 以上のケースでは、<link>タグが必要になる可能性があります。経験則として、ルールは@import、ファイルが取得されるまでインクルードされたリソースの読み込みを延期するため、避ける必要があります。また、@import を「フラット化」するビルド プロセスがある場合は、Web フォントに関する別の問題が発生します。Google WebFonts などの動的プロバイダーは、プラットフォーム固有のフォント バージョンを提供するため、コンテンツを単にインライン化すると、一部のプラットフォームでフォントが壊れてしまいます。

では、なぜ Web フォント ローダーを使用するのでしょうか。フォントの読み込み方法を完全に制御する必要がある場合です。ほとんどのブラウザーは、すべての CSS がダウンロードされて適用されるまで、画面へのコンテンツの描画を延期します。これにより、「スタイル設定されていないコンテンツのフラッシュ」の問題を回避できます。欠点は、コンテンツが表示されるまでに余分な一時停止と遅延が発生する可能性があることです。JS ローダーを使用すると、フォントが表示される方法とタイミングを定義できます。たとえば、元のコンテンツが画面に描画された後にフォントをフェードインすることもできます。

もう一度言いますが、90% のケースは<link>タグです。優れた CDN を使用すると、フォントはすぐにダウンロードされ、キャッシュから提供される可能性がさらに高くなります。

Google Web Fontsの詳しい情報や詳細については、こちらをご覧ください。GDLビデオ

おすすめ記事