記事内に商品プロモーションが含まれる場合があります
サルワカでは大半の記事がAMPに対応しています。AMPのデザインも通常のスマホで見たときとほとんど変わらないようになっています。
サルワカのAMP対応ページ
AMPでもWebフォントが使える！
AMPでもWebフォントの「Google Fonts」や「FontAwesome」を簡単に使うことができます。今回はその方法をサクッと解説しておきたいと思います。
1. AMPでFont Awesomeを導入する方法
WordPressのプラグインでAMP対応している場合の方法は、後ほど解説します。
AMPの場合には、通常のFont Awesomeコードとは別のコードを使うことになります。
以下のコードをコピペすればOK
AMP用のFont Awesomeコード
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
上記のコードをまるっとAMPページのheadタグ内に貼り付ければFont Awesomeのアイコンが使える（通常通りに表示される）ようになります。
バージョンに注意！
上のコードに含まれる4.7.0という数字はFont Awesomeのバージョンを表しています。
バージョンはFont Awesomeのトップページなどで確認することができます。
バージョンがアップデートされたときには、コードのバージョンの数字を書き換えないと、新しいアイコンが使えないので注意しましょう。
Font Awesomeの使い方
そもそものFont Awesomeの使い方については、こちらの記事で解説しています。
2. AMPでGoogleFontsを使う方法
AMPでGoogle Fontsを使う場合のコードは通常の場合と同じになります。
つまり、GoogleFontsでいつも通りに使いたいフォントを選んでコードをコピーすれば良いわけですね。
Font Awesomeと同様に、headタグに貼り付けます。そして、AMP用のCSSでfont-family:'フォント名',~;というように指定します。よく分からないという方は、以下の記事が参考になるはずです。
（WordPress）AMP用のプラグインを使っている場合
WordPressプラグイン「AMP」を使っている場合には、下記の記事で紹介されている方法が参考になるかと思います。
以下のコード（上記記事の引用です）をfunction.phpに追記します。
function.php
//AMP webフォントを追加
add_action( 'amp_post_template_data', 'my_amp_post_custom_add_fonts');
function my_amp_post_custom_add_fonts($data) {
//デフォルト読み込みのフォントMerriweatherを削除
$data['font_urls'] = array(
'Josefin' => 'https://fonts.googleapis.com/css?family=Josefin+Sans',
'FontAwesome' => 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
// 使いたいフォントの名前とurlをここに追加
);
return $data;
}
赤字の部分で使用するGoogleFontsを指定します。
矢印左側（'Josefin'の部分）には自分が分かるような名前を書きます（フォント名など自由）。
矢印の右側（'https://fonts.google....'）の部分には、Google Fonts利用時に出力されるコードのhref属性の中身をコピペすればOKです（下画像参考）。なお、複数のフォントを一気に指定することもできます。
コードの青字の部分はFontAwesome用のコードです。FontAwesomeのバージョン（コードの4.7.0の部分）が変わっていない限り、とくに変更する必要はありません。詳しくは、こちらの記事をご覧くださいませ（再掲）。
参考：「AMP for WP」を使っている場合
「AMP for WP」というプラグインも合わせて使用している場合、function.phpをいじる必要はなくなります。この記事の前半で紹介した「Font Awesomeのコード」や「Google Fontsのコード」を下記の場所に貼り付ければ完了です。AMP for WPの設定 Advanced Settings Enter HTML in Headerの欄内
「AMP for WP」の使い方は、下記の記事が参考になるかと思います。
