はじめに
多くのサイトが利用している Google Fonts は、AMP でも使えます。
2 つの読み込み方法があり、サイトに合わせた選択が可能です。その 2 つとは、「<link> タグを使う方法」と「CSS の @font-face で読み込む方法」です。
この 2 つの読み込み方法をご紹介します。
尚、Optimize custom fonts にて、AMP 公式の説明をご覧いただけます。
link タグを使用し読み込み
AMP ページでは、原則外部のスタイルシートは読み込めません。
しかし、下記の 5 つの Web フォントのスタイルシートは、<link> タグを使用し読み込めます。
- Typography.com
- Fonts.com
- Google Fonts
- Typekit
- Font Awesome
link タグの取得
<link> タグで Google Fonts を読み込む場合は、通常ページと同じ <link> タグを使います。
Google Fonts より使いたいフォントを選択し、<link> タグを取得します。
例えば、Noto Sans JP(ウェイトは 400 、スタイルはノーマル)であれば、下記の <link> タグです。
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
link タグの追加位置
取得した <link> タグは、</head> 閉じタグ直前に追加します。
これは、レンダリングブロックを少しでも抑えながら Google Fonts を使うためです。
事前読み込み
<link> タグで Google Fonts を読み込む場合は、preconnect
と dns-prefetch
を指定します。
- preconnect
- ネットワーク接続に必要な動作を事前に行えるように、ブラウザにヒントを提供します。これにより、読み込むリソースの接続時間を削減できます。
- dns-prefetch
- どこにリクエストしリソースを取得するのか、ブラウザにヒントを提供します。これにより、リソースの読み込み時間を短縮できます。
下記の <link> タグを <head></head> 内の最初の方に追加します。
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
少なくとも、Google Fonts を読み込む <link> タグより前に追加する必要があります。
CSS の指定
あとは、CSS を指定すれば、Google Fonts を表示できます。
body {
font-family: 'Noto Sans JP', sans-serif;
}
link タグのメリット・デメリット
<link> タグで読み込む方法には、以下のメリットとデメリットがあります。
メリット |
---|
簡単に読み込める |
デメリット |
Google Fonts がレンダリングをブロックし、サイトが遅くなる |
FOUT や FOIT が発生する |
- FOUT
- Web フォントの読み込みが完了するまで代替フォントで表示され、読み込みが完了すると Web フォントに切り替わる現象。
- FOIT
- Web フォントの読み込みが完了するまで、テキストが表示されない現象。
フォントをサーバーに設置し @font-face で読み込み
Google Fonts は、自サイトのサーバーに設置し、CSS の @font-face
で読み込むこともできます。
この読み込み方法では、Google Fonts を先読みする rel="preload"
が使えます。
- preload
- 必要となるリソースをダウンロードしておくように、ブラウザに伝えます。これにより、リソースの取得を最適化できます。
<link> タグでの読み込みは、サイト表示速度が遅くなる欠点があります。
それに対し、@font-face
と rel="preload"
による読み込みは、表示速度が犠牲になりにくいのが特徴です。先読みにより、Google Fonts がレンダリングをブロックしないためです。
また、FOUT や FOIT が発生しにくく、文字がちらつく現象を抑えられます。
この方法のやり方は、下記のページで詳しく解説しています。
Google Fonts を preload で先読みしユーザー体験を改善
尚、この読み込み方法は、通常ページにも適用できます。
@font-face と preload のメリットとデメリット
@font-face
と rel="preload"
で読み込む方法には、以下のメリットとデメリットがあります。
メリット |
---|
レンダリングブロックを回避し高速で Google Fonts を使える |
FOUT や FOIT が発生しにくい |
デメリット |
<link> タグでの読み込みより手間がかかる |
Google の CDN を使わない(使うにはプログラミングが必要) |
IE など preload に対応していないブラウザがある |
どちらを選ぶか
私の好きな方法は、@font-face
と rel="preload"
での読み込みです。
また、2021 年 7 月時点において、Google は <link rel="preload">
と font-display: optional
の組み合わせが、最も効果的に CLS を防げると指摘しています。
可能であれば、フォントファイルをサーバーに設置し @font-face
と rel="preload"
で読み込むのがいいかもしれません。
尚、通常ページで Google Fonts を使う場合は、Google Fonts を非同期で読み込みサイトスピードを高速化にて解説している Web Font Loader で非同期で読み込む方法もあります。