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

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

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

AMP には様々な制限がありますが、フォントに関してはほぼ制限がありません。

多くのサイトが利用している Google Fonts を、 WordPress の AMP ページで使う 2 つの方法をご紹介します。

1 つは、 <head> タグ内で <link> タグを用いる方法。

もう 1 つは、 Google Fonts を子テーマに設置し CSS の @font-face を指定する方法。

後者は親テーマのテンプレートファイルに手を加えないため、初心者の方にも優しい方法です。

説明で用いるのは、フォントスタイルがノーマル、フォントウェイトが 400・500・700 の Roboto

複数のフォントウェイトを使っているため、他のフォントにも適用しやすいはずです。

link タグを使用しフォントを読み込み

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

しかし、「 Typography.com 」「 Fonts.com 」「 Google Fonts 」「 Typekit 」「 Font Awesome 」の 5 つは、 <link> タグを使用し読み込めます。

Roboto の 400・500・700 を <link> タグで読み込むためには、 <head> タグに下記のコードを追加します。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">

通常ページで Google Fonts を読み込む際の <link> タグと同じです。

あとは CSS でフォントを指定します。

#site-title a {
  font-family: 'Roboto', sans-serif;
}

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

  • メリット:カスタマイズの手間が少ない
  • デメリット:テーマによっては、親テーマのファイルを変更しなければならない

親テーマのアップデートが自動的に適用されなくなる恐れがあるため、初心者の方には向いていないかもしれません。

フォントを子テーマに設置し @font-face で指定

親テーマのアップデートの恩恵を自動的に受けたい場合は、フォントを子テーマに設置し CSS で指定する方法がおすすめです。

一切親テーマのファイルには触らず、子テーマのみで Google Fonts を読み込めます。

使用するフォントをダウンロード

まずは使用する Google Fonts を決め、各フォントページ右上にある SELECT THIS FONT をクリックします。

Google Fontsの各フォントページ右上にあるSELECT THIS FONT

次にポップアップを表示させ、右上のダウンロードアイコンをクリック。

ポップアップの右上にあるダウンロードアイコン

これでご使用のデバイスに、フォントファイルをダウンロードできます。

ダウンロードした zip 形式のファイルを解凍すると、 Roboto の場合には 12 個の ttf ファイルと 1 個のライセンス txt ファイルが入っています。

フォントウェイト 400・500・700 の使用に必要なファイルは、「 Roboto-Regular.ttf 」(フォントウェイト 400 のファイル)、「 Roboto-Medium.ttf 」(フォントウェイト 500 のファイル)、「 Roboto-Bold.ttf 」(フォントウェイト 700 のファイル)の 3 つです。

ファイル名にフォントウェイトがついているため、分かりやすいはず。

利用できるフォントウェイトの数によって、入っているファイル数は異なります。

また、フォントによっては、 OFL.txt が入っています。フォント毎にライセンスが異なるため、必ずライセンスの内容をご確認ください。

フォントを子テーマに設置

次に FTP ソフトやサーバーのファイルマネージャーを使用し、ご使用中の子テーマの直下に 1 つフォルダを作成します。

作成したフォルダに fonts と名前をつけ、ダウンロードしておいた「 Roboto-Regular.ttf 」「 Roboto-Medium.ttf 」「 Roboto-Bold.ttf 」の 3 つのファイルをアップロードします。

CSS で指定

あとは CSS で呼び出します。

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url(サイトのURL/wp-content/themes/テーマ名/fonts/Roboto-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url(サイトのURL/wp-content/themes/テーマ名/fonts/Roboto-Medium.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url(サイトのURL/wp-content/themes/テーマ名/fonts/Roboto-Bold.ttf) format('truetype');
}

400・500・700 のフォントウェイトの分だけ、 @font-face を指定します。

src: url() 内のサイトのURLテーマ名には、ご自身のサイトの URL とご使用中の子テーマ名をご指定ください。

AMP で @font-face を使用する場合には、http または https から始まる絶対パスで指定する必要があります。相対パスで指定すると、フォントの読み込みに失敗します。

また、 src: url() 内の Roboto-Regular.ttfRoboto-Medium.ttfRoboto-Bold.ttf には、 fonts フォルダにアップロードしたファイル名を指定します。

使用する際は、要素毎に font-family だけではなく font-weight も指定します。

#site-title a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.article h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.article h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

メリットとデメリット

フォントを子テーマに設置し CSS で指定する方法には、以下のメリットとデメリットがあります。

  • メリット:親テーマのファイルを変更する必要がないため、初心者の方も安心
  • メリット:自作のフォントも AMP ページで使用できる
  • デメリット:カスタマイズに手間がかかる
  • デメリット:フォントファイルのサイズ分だけ、サーバーに負荷がかかる

日本語のフォントを設置する場合には、ファイルサイズを少なくするためにサブセット化が必須です。


どのフォントを使用するかで、サイトの雰囲気は大きく変わります。

美しく見やすいサイトにするために、 AMP ページをお好きなフォントで飾ってはいかがでしょうか。

通常ページで Google Fonts を使用される場合には、「 Google Fonts を遅延で読み込みサイト表示を高速化」をご覧ください。