AMPページのgoogleフォント使用について

AMPでもGoogle Fontsは使用可能です。
実際、テーマ設定でデフォルト以外のフォントにしている場合には、そのフォントのスタイルシートがAMPページでも読み込まれるようになっています。

テーマ設定で指定できるGoogle Fonts以外を使用されたい場合には、以下のカスタマイズをします。

ステップ1：使用したいGoogle Fontsのスタイルシートを読み込む

親テーマ内にあるsingle-amp.phpを、子テーマにコピペします。
子テーマにコピペしたsingle-amp.phpを開き、48行目のecho '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;を探します。
この下に下記のようにコードを挿入し、Google Fontsのスタイルシートを読み込ませます。
echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">'.PHP_EOL;

上記のコードはGoogle FontsのRoboto（フォントウェイト：400、フォントスタイル：ノーマル）を読み込む例です。
hrefで指定しているURLを変更することで、他のGoogle Fontsも使用可能です。

ステップ2：cssでfont-familyを指定

Google Fontsを読み込んだ後は、子テーマのamp.cssでサイトタイトルのfont-familyを指定します。

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

上記のcssはRobotoをサイトタイトルに指定する例です。

• この返信は7年、 8ヶ月前にわいひらが編集しました。理由: 文字化け（エスケープ文字）の修正

おぅ…　HTML特殊文字変換ツールを使ったら、文字化けしている…

しかも、どうやっても403エラーが出てしまいます。

さとぽんさん、カスタマイズをされるのはちょっとお待ちを。

notepad.pwに貼り付けたコードだったら大丈夫かな？

https://notepad.pw/share/c42tnsoo8

誤解を生みかねないので、説明を追加します。あくまでカスタマイズを行うのは、子テーマに設置したsingle-amp.phpです。

Akira様
ありがとうございます。
初歩的な質問でお恥ずかしいのですが、
「親テーマ内にあるsingle-amp.phpを、子テーマにコピペします。」
が分かりません。
これはサーバー側の話ですか？ワードプレスのカスタマイズから操作する話ではないですよね？

サーバー側の操作とすればFTPでコピーするということでしょうか？

わいひらさん、コードの修正ありがとうございます。

さとぽんさん、single-amp.phpを変更するのは、さとぽんさんにはリスクが大きい気がしてきました。

というのも、子テーマにsingle-amp.phpを設置すると、今後Simplicityのアップデートでsingle-amp.phpが変更されても、その変更が適用されないためです。

ほんの少し手間が増えますが、親ファイルを変更せずGoogle Fontsを使う方法がさとぽんさんに適しているように思えます。
その方法を紹介するために、以下の情報を教えていただきますか？

使用するGoogle Fontsの情報（必須）
・フォント名
・スタイル（ノーマルなのか？イタリック体なのか？）
・フォントウェイト（100から900のうち、どのウェイトを使うのか）

サイトURL（任意）
URLが分かると、より詳細に説明できます。

わいひら様
丁寧なご説明ありがとうございます。

Akira様
ご察しの通りで、子テーマのアップデートがあったときに、それをWordpressへアップロードすると再度設定が必要なのでは？？　果たして、次回のアップデートの時にもう一度同じことが、私にできるだろうか？？　と気にしておりました。

できればテーマのアップデートに関わらず、Googleフォントが適用されることを望みます。

以下、情報です。
・フォント名・・・「Faster One」
・スタイル/フォントウェイト・・・「Regular 400」
・サイトURL・・・「https://me-her.com/」

ご教授いただけますよう、よろしくお願いいたします。

さとぽんさん、情報のご提供ありがとうございます。

今度紹介するのは、Googleフォントを子テーマに設置しcssで呼び出す方法です。
そのため、Simplicityのアップデートの影響を一切受けません。

以下の3ステップでカスタマイズは完了します。

ステップ1：Googleフォントをダウンロードする

使用されるFaster Oneを、まずはダウンロードします。
Faster Oneを訪れ、ページ右上にある「SELECT THIS FONT」をクリック。右下に現れるポップアップを表示させ、ポップアップ右上にあるダウンロードボタンをクリックするとダウンロードできます。

ダウンロードしたファイルはzip形式であるため、予め解凍しておきます。
ファイルの中には、「FasterOne-Regular.ttf」と「OFL.txt」が入っています。

ステップ2：Googleフォントを子テーマに設置

FTPソフトを使いsimplicity2-child直下にフォルダを1つ作成し、フォルダ名をfontにします。

作成したfontフォルダの中に、ステップ1でダウンロードした「FasterOne-Regular.ttf」と「OFL.txt」をFTPソフトを使いアップロードします。

ステップ3：cssで呼び出しと指定

子テーマのamp.cssに、以下のcssをコピペします。

@font-face {
  font-family: 'Faster One';
  src: url("https://me-her.com/wp-content/themes/simplicity2-child/font/FasterOne-Regular.ttf");
}

#site-title a {
  font-family: 'Faster One', cursive;
}

AMPで@font-faceを用いてフォントを呼び出す際には、絶対パスで指定します。
そのため、urlを指定する際には、必ずhttpまたはhttpsから始める必要があります。

ご不明な点がありましたら、お手数をお掛けしますがご質問ください。

Akira様
できました！！　AMPページでもGoogleフォントが表示されています！！
感動です。
この度はご丁寧に教えていただき、ありがとうございました。
大変助かりました。