AMP ページで Google Fonts を使う 2 つの方法

AMPでGoogle Fontsを使う2つの方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

多くのサイトが利用している Google Fonts は、AMP でも使えます。

2 つの読み込み方法があり、サイトに合わせた選択が可能です。

この記事と関連する記事をご覧いただくと、以下の内容を把握できます。

  • <link> タグを使った読み込み方法
  • より速く読み込むための preconnect と dns-prefetch の使用
  • CSS の @font-face で読み込む方法
  • レンダリングをブロックしない preload の使用

link タグを使用し読み込み

AMP ページでは、原則外部のスタイルシートは読み込めません。

しかし、下記の 5 つは、<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" rel="stylesheet">

link タグの追加位置

取得した <link> タグは、</head> 閉じタグ直前に追加します。

レンダリングブロックの影響を少しでも抑え、高速で Google Fonts を使うためです。

Google が提案している追加位置の例は、下記のページでご確認いただけます。<style amp-custom></style> より後に追加しています。

Optimize the AMP Runtime loading

事前読み込み

<link> タグで Google Fonts を読み込む場合には、preconnectdns-prefetch を指定します。

これは、Google が推奨している事項です。

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> タグで読み込む方法には、以下のメリットとデメリットがあります。

<link> タグのメリット・デメリット
メリット
簡単に読み込める
デメリット
Google Fonts がレンダリングをブロックし、サイトが遅くなる
FOUT や FOIT が発生する
FOUT
Web フォントの読み込みが完了するまで代替フォントで表示され、読み込みが完了すると Web フォントに切り替わる現象。
FOIT
Web フォントの読み込みが完了するまで、テキストが表示されない現象。

フォントをサーバーに設置し @font-face で読み込み

Google Fonts は、自サイトのサーバーに設置し、CSS の @font-face で読み込むこともできます。

この読み込み方法では、Google Fonts を先読みする rel="preload" が使えます。

preload
必要となるリソースをダウンロードしておくように、ブラウザに伝えます。これにより、リソースの取得を最適化できます。

<link> タグでの読み込みは、サイトスピードが遅くなる欠点があります。

それに対し、@font-facerel="preload" による読み込みは、サイトスピードが犠牲になりません。

先読みすることで、Google Fonts がレンダリングをブロックしないためです。

また、FOUT や FOIT が発生しにくく、文字がちらつく現象を抑えられます。

この方法のやり方は、下記のページで詳しく解説しています。

AMP にも対応!Google Fonts を preload で先読みし最適化

尚、この読み込み方法は、通常ページにも適用できます。

@font-face と preload のメリットとデメリット

@font-facerel="preload" で読み込む方法には、以下のメリットとデメリットがあります。

@font-face と preload のメリット・デメリット
メリット
レンダリングブロックを回避し高速で Google Fonts を使える
FOUT や FOIT が発生しにくい
デメリット
<link> タグでの読み込みより手間がかかる
Google の CDN を使わない
preload に対応していないブラウザでは、レンダリングブロックが発生する

どちらを選ぶか

私の好きな方法は、@font-facerel="preload" での読み込みです。

ただ、どちらを選ぶかは、サイトに合わせます。

他のサイトでもよく使われている Google Fonts であれば、<link> タグで読み込んでもサイトは遅くならないかもしれません。

というのも、ユーザーのブラウザに、すでにフォントのキャッシュが作られている可能性があるためです。

キャッシュがあれば、キャッシュを使い Google Fonts を表示できます。

他のサイトで作られたキャッシュを使い回せるのは、Google の CDN の魅力です。

また、手間がかからないのも <link> タグのメリットです。

一方、あまり使われていない Google Fonts は、サーバーに設置し @font-facerel="preload" で読み込むのがいいかもしれません。

尚、通常ページで Google Fonts を使う場合には、下記のページで解説している Web Font Loader で非同期で読み込む方法もあります。

「 Google Fonts を非同期で読み込みサイトスピードを高速化」