[解決済み】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. を使用する ウェブフォントローダ

解決方法は？

90%以上のケースで、あなたはおそらく <link> タグを使用します。経験則から言うと @import ルールは、ファイルが取得されるまでインクルードされたリソースの読み込みを延期するからです。また、@import を "flattens" するビルドプロセスがある場合、ウェブフォントで別の問題が発生します。Google WebFonts などの動的プロバイダはプラットフォーム固有のバージョンのフォントを提供するので、コンテンツを単にインライン化すると、いくつかのプラットフォームでは壊れたフォントが表示されてしまいます。

さて、なぜウェブフォントローダを使うのでしょうか？もし、あなたが 完全 フォントの読み込みを制御することができます。ほとんどのブラウザは、すべてのCSSがダウンロードされ適用されるまで、画面にコンテンツを表示するのを延期します。欠点は、コンテンツが表示されるまでに余分な間と遅延が発生することです。JSローダーでは、フォントが表示される方法とタイミングを定義できます。たとえば、オリジナルのコンテンツが画面に描かれた後に、フォントをフェードインさせることもできます。

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

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