ブロギングライフ · 1か月 ago

ブロギングライフ

AMP for WordPressのAMPページでGoogle フォントを使用する設定方法

通常ページと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>タグによってフォントを使用することが許可されています。

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ページを表示して、フォントが適切に表示されていれば、作業完了です。