ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

通常ページとAMPページは、同じフォントを使用するのが基本です。通常ページでGoogle Fontsを使用している場合は、同じフォントをAMPページでも使用することが望ましいです。

Google Fontsについては、以下の記事で詳しく説明しております。

Google Fontsの特徴、選び方、設定と注意点

本記事では、AMP for WordPressを使用してAMP化したサイトで、AMPページにGoogle Fontsを利用する設定方法を紹介致します。

AMP ページにGoogle Fontsを埋め込む方法

AMPは高速化のために仕様に様々な制限が設けられています。AMPページでは外部のスタイルシートを含めることはできませんが、カスタムフォントは例外となっています。カスタアムフォントを埋め込む方法は、以下の二通りの選択肢があります。AMPの資料:Add custom fonts を参照して訳した説明になります。

  1. <link>タグを使用する(ホワイトリストされたプロバイダーのみ利用可)
  2. @font-face経由での利用(制限はなく、全てのフォントを許可)

1. <link>タグを使用したフォントの埋め込み

<link>タグ(通常ページの<head>タグ内)に以下の様な形でコードを追加します。

<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto”>

以下のサイトはホワイトリスト化されて<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 を使用することもできます。

備考:
@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のソースコードの最後に以下のコードを追加(コピーペースト)します。

備考:
上記コードは、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に追加します。

以下のコードをコピーして、上記②で加えたコードの下に貼り付けます。


以下は、WordPressのテーマ編集画面でテンプレートファイルfunctions.phpに、<head>タグ内にGoogle Fontsへの<link>タグを追加するコードとCSSへのフォント設定を挿入するコードを追加した例です。

テーマのテンプレートファイルを編集して、AMPページにGoogle Fontsを追加する設定。設定内容を確認後、[ファイルを更新]ボタンを押して、編集したファイルを保存します。

備考:
上の例では、親テーマを直接編集しています。しかし、親テーマを直接編集して設定した場合は、テーマが更新されると設定内容が上書きされてしまい、再設定が必要となります。親テーマの編集は保守性が良くありません。子テーマを使用すれば、設定はテーマを更新しても保持されるため、保守管理がしやすいです。テンプレートファイルの編集は、子テーマを利用することを強くお勧め致します。

以下は、子テーマのfunctions.phpにコードを追加した例です。子テーマの場合は、変更箇所が一見して分かるので、その点でも保守、管理がし易いです。

子テーマのテンプレートファイルにGoogle Fontsを設定する例です。

AMPページを表示して、フォントが適切に表示されていれば、作業完了です。

YouTube

本記事で紹介した作業内容をYouTube 動画で紹介しています。設定内容の確認、フォントの文字の太さなどの調整の設定方法などもビデオの後半で紹介しています。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!