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

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

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

カスタマイズ箇所フォント(AMP)
カスタマイズ方法PHP ・ CSS
テンプレート変更あり/ なし
コピペの可否50% 可能

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

「 Simplicity の AMP ページでシェアボタンに SNS アイコンを表示する」では、 Icomoon で作成された アイコンフォントを表示するカスタマイズをご紹介しています。

今回は多くのサイトが利用している Google Fonts を、 Simplicity の AMP ページで使う 2つのカスタマイズをご紹介します。

1つは、 amp-header.php で <link> タグを用いる方法。

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

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

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

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

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

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

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

Google Fonts を <link> タグで読み込むには、まず親テーマの amp-header.php を子テーマ直下にコピペします。

子テーマに設置した amp-header.php を開き、下記のコードを探します。

echo '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;

このコードは、「 Font Awesome 」を読み込んでいる部分。

Roboto の 400・500・700を読み込むために、上記のコードの下の行に以下のコードを追加します。

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

<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;
}

amp-header.php で <link> タグを使用するカスタマイズには、以下のメリットとデメリットがあります。

  • メリット:カスタマイズの手間が少ない
  • デメリット:Simplicity のアップデートの恩恵を受けられない恐れがある

アップデートで amp-header.php に変更があった場合には、ご自身でアップデートに対応しなければなりません。

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

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

一切親テーマのファイルには触らず、子テーマのみでカスタマイズができます。

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

まずは使用する 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 ソフトを使用し、 simplicity2-child の直下に 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/simplicity2-child/fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url("あなたのサイトのURL/wp-content/themes/simplicity2-child/fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url("あなたのサイトのURL/wp-content/themes/simplicity2-child/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 で指定するカスタマイズには、以下のメリットとデメリットがあります。

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

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


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

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

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

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする