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

188

Google Web Fontsをページに含める好ましい方法は何ですか？

リンクタグ経由？

<link href = 'http：//fonts.googleapis.com/css？family = Judson：400,400italic、700' rel = 'stylesheet' type = 'text / css'>

スタイルシートのインポートを介して？

@import url（http://fonts.googleapis.com/css?family=Kameron:400,700）;

またはWebフォントローダーを使用する

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— カジョ
ソース

Googleフォントを使用する前に、この質問を読むこともできます。特定のプロジェクトによっては、それが常に賢明な選択であるとは限りません。

— Obmerk Kronen 2016

回答:

283

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

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

繰り返しになりますが、90％の場合が<link>タグです。適切なCDNを使用すると、フォントはすぐにダウンし、キャッシュから提供される可能性が高くなります。

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

— イグリゴリク
ソース

「ファイルがフェッチされるまで、インクルードされたリソースのロードを遅らせるため」-@importを使用するのはそれが適切な理由ではありませんか？通常は、フォントが読み込まれるまで（そのフォントのちらつきを避けるために）コンテンツを表示したくないためです

— Alex

Web Fonts APIは、HTML5 Canvasを操作するときに非常に役立ちます。テキストを描画する前にロードが完了していないフォントは使用できません。もちろん、フォントがロードされると、自動的に更新されません。これに関連して、APIは、ゲームなどでアセットのロードの進行状況を追跡するために必要です。

— rvighne 2014

この情報は、Google Web Fontsページにあります。それはあなたに3つのオプションを提示するだけです-そして、どれをいつ使うべきかについての有用なヒントを与えません。

— ギャル

Google独自の「Getting Started」チュートリアルでは<link>メソッドのみを使用しているので、それは暗黙のうちに推奨されるものだと思います

— James Cushing

テキストが表示される前にフォントが読み込まれるためrel="preload"、<link>タグに追加することもできます。参照してください3perf.com/blog/link-rels

— イライジャ・モック

SEO（検索エンジン最適化）とパフォーマンスが心配な場合は、<link>タグを使用することをお勧めします。フォントをプリロードできるからです。

例：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

詳細については、こちらをご覧ください：https : //ashton.codes/preload-google-fonts-using-resource-hints/

— ロブスター
ソース

<link>フォントにはバージョン管理があるため、Google が提供するものを使用しますが、その真上にはHTML5の事前接続機能を使用して、ブラウザーにTCP接続を開き、fonts.gstatic.comとSSLをネゴシエートするように要求します。これは明らかに<head></head>タグに存在する必要のある例です：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— マーク・チリア・ヴィンチェンティ
ソース

事前接続が、例のスタイルシートリンクとは完全に異なるドメインであることは正しいですか？fonts.gstatic.com対fonts.googleapis.com

— BadHorsie

@BadHorsieそれはそれの全体のポイントです。fonts.googleapis.comのスタイルシートには、fonts.gstatic.comのリソースへのリンクがあります。ブラウザーに後者のホストへの接続を開始するように指示しているため、スタイルシートでリンクが見つかるまでに接続または開始されます。

— Mark Cilia Vincenti、