
通常ページとAMPページは、同じフォントを使用するのが基本です。通常ページでGoogle Fontsを使用している場合は、同じフォントをAMPページでも使用することが望ましいです。
Google Fontsについては、以下の記事で詳しく説明しております。
本記事では、AMP for WordPressを使用してAMP化したサイトで、AMPページにGoogle Fontsを利用する設定方法を紹介致します。
AMP ページにGoogle Fontsを埋め込む方法
AMPは高速化のために仕様に様々な制限が設けられています。AMPページでは外部のスタイルシートを含めることはできませんが、カスタムフォントは例外となっています。カスタアムフォントを埋め込む方法は、以下の二通りの選択肢があります。AMPの資料:Add custom fonts を参照して訳した説明になります。
- <link>タグを使用する(ホワイトリストされたプロバイダーのみ利用可)
- @font-face経由での利用(制限はなく、全てのフォントを許可)
1. <link>タグを使用したフォントの埋め込み
<link>タグ(通常ページの<head>タグ内)に以下の様な形でコードを追加します。
以下のサイトはホワイトリスト化されて<link>タグによってフォントを使用することが許可されています。
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: https://use.typekit.net
- Font Awesome: https://maxcdn.bootstrapcdn.com
上記リストには、Google Fontsが含まれています。以下の様なCSSに含める方法も可能ですが、Google Fontsは、<link>タグによる埋め込みがホワイトリスト化されていること、AMPではCSSのサイズ制限などもあるので、Google Fontsの埋め込みは<link>タグを使用する方法がお勧めです。
2. @font-face を使用する
AMP のスタイルシート内で、CSSのルール @font-face を使用することもできます。
<style amp-custom> @font-face { font-family: "Roboto"; src: url("https://fonts.googleapis.com/css?family=Roboto"); } body { font-family: "Robot", sans-serif; } </style>
@font-face 経由で含めるフォントは、HTTPまたはHTTPSのスキーム経由でなければなりません。
AMPページ<head>タグ内に<link>タグを使用してGoogle Fontsを追加
AMP for WordPressには、<head>タグ内に挿入する関数が予め定義されています。プラグインの関数を使用することで、簡単に<head>タグにコードを挿入することができます。以下、プラグインの関数を使用したAMPページの<head> タグ内にGoogle Fontsの<link> タグのコードを挿入する設定手順です。
① WordPress ダッシュボードから「外観」-「テーマの編集」をクリックします。右側に表示されるテーマファイルのリストの中から、テーマのための関数(functions.php )をクリックします。
本作業はテーマのテンプレートファイル functions.phpを編集して行います。親テーマを直接編集して設定した場合は、テーマが更新されると設定内容が上書きされてしまい、再設定が必要となります。テーマの更新の毎に設定を行うことは保守性が良くありません。子テーマを使用すれば、設定はテーマを更新しても保持されるため、保守性が良いです。テンプレートファイルの編集は、子テーマを利用することを強くお勧め致します。
② 表示されるfunctions.phpのソースコードの最後に以下のコードを追加(コピーペースト)します。
add_action( 'amp_post_template_head', 'amp_add_google_fonts' ); function amp_add_google_fonts( $amp_template ) { ?> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <?php }
上記コードは、Google Fontsの”Roboto”フォントファミリーを利用するコード例です。
③ 続いて、CSSのコード追加の関数を使用したコードを追加します。
埋め込んだGoogle Fonts のフォントファミリーの利用設定をCSSに加える
AMPページの<head>タグ内に<link>タグを使用して設定したGoogle Fontsのフォントファミリーを、AMPのCSSに追加します。AMP for WordPressでは、CSSへの設定の追加をするための関数、”amp_post_template_css”が定義されています。
amp_post_template_cssを使用して、埋め込んだGoogle Fontsのフォントファミリー(ここでの例は、Robotoです)を、サイトのbodyに使用するフォントに指定するコードをCSSに追加します。
以下のコードをコピーして、上記②で加えたコードの下に貼り付けます。
add_action( 'amp_post_template_css', 'amp_additional_css_styles' ); function amp_additional_css_styles( $amp_template ) { // CSSに追加するコード(CSSコード以外は入れないで下さい) ?> body { font: 16px 'Roboto', sans-serif; } } <?php }
以下は、WordPressのテーマ編集画面でテンプレートファイルfunctions.phpに、<head>タグ内にGoogle Fontsへの<link>タグを追加するコードとCSSへのフォント設定を挿入するコードを追加した例です。
設定内容を確認後、[ファイルを更新]ボタンを押して、編集したファイルを保存します。
上の例では、親テーマを直接編集しています。しかし、親テーマを直接編集して設定した場合は、テーマが更新されると設定内容が上書きされてしまい、再設定が必要となります。親テーマの編集は保守性が良くありません。子テーマを使用すれば、設定はテーマを更新しても保持されるため、保守管理がしやすいです。テンプレートファイルの編集は、子テーマを利用することを強くお勧め致します。
以下は、子テーマのfunctions.phpにコードを追加した例です。子テーマの場合は、変更箇所が一見して分かるので、その点でも保守、管理がし易いです。
AMPページを表示して、フォントが適切に表示されていれば、作業完了です。
YouTube
本記事で紹介した作業内容をYouTube 動画で紹介しています。設定内容の確認、フォントの文字の太さなどの調整の設定方法などもビデオの後半で紹介しています。
コメントを残す(承認後表示されます)