メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web クリエイター

AMP でも読み込み可能

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

2 つの読み込み方法があり、サイトに合わせた選択が可能です。その 2 つとは、「<link> タグを使う方法」と「CSS の @font-face で読み込む方法」です。

この 2 つの読み込み方法をご紹介します。

尚、Optimize custom fonts にて、AMP 公式の説明をご覧いただけます。

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

しかし、下記の 5 つの Web フォントのスタイルシートは、<link> タグを使用し読み込めます。

  • Typography.com
  • Fonts.com
  • Google Fonts
  • Typekit
  • Font Awesome

<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> タグは、</head> 閉じタグ直前に追加します。

これは、レンダリングブロックを少しでも抑えながら Google Fonts を使うためです。

事前読み込み

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

preconnect の使用により、ネットワーク接続に必要な動作を事前に行えるようにブラウザにヒントを提供できます。これにより、読み込むリソースの接続時間を削減できます。

dns-prefetch の使用により、どこにリクエストしリソースを取得するのかブラウザにヒントを提供できます。これにより、リソースの読み込み時間を短縮できます。

下記の <link> タグを <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;
}

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

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

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

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

この方法のやり方は、Google Fonts を preload で先読みし最適化 で詳しく解説しています。

どちらを選ぶか

<link> で読み込む方法と、@font-facepreload で読み込み方法のどちらがいいかは、サイトによって異なります。また、読み込むフォントによっても異なります。

Google は オプションのフォントをプリロードして、レイアウト シフトと非表示テキスト(FOIT)の点滅を防ぐ にて、<link rel="preload">font-display: optional の組み合わせがレイアウトシフトを防ぐ効果的な方法と言っています。

ただ、Chrome チームは フォントに関するおすすめの方法 にて、preload の使用に注意を促しています。また、Web Almanac の調査 によれば、サードパーティフォントを使用するサイトは、ファーストパーティフォントを使用するサイトよりレンダリングが速いことが分かったとも言っています。

サイトの表示速度に加えて、FOUT と FOIT が原因のフォントのちらつきやレイアウトシフトの防止を考慮しなければいけません。実際にどちらも試し、サイトに適した方法を採用するのがいいかもしれません。または、Web フォントを使用せず解決できないかも考えるのがいいように思えます。

フォローする