AMPで「Font Awesome」と「Google Fonts」を使う方法

amp

サルワカでは大半の記事がAMPに対応しています。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のバージョンを表しています。

fontawesomeのバージョン

バージョンはFont Awesomeのトップページなどで確認することができます。

バージョンがアップデートされたときには、コードのバージョンの数字を書き換えないと、新しいアイコンが使えないので注意しましょう。

Font Awesomeの使い方

そもそものFont Awesomeの使い方については、こちらの記事で解説しています。

2. AMPでGoogleFontsを使う方法

AMPでGoogle Fontsを使う場合のコードは通常の場合と同じになります。

Fadfa 10

つまり、GoogleFontsでいつも通りに使いたいフォントを選んでコードをコピーすれば良いわけですね。

Font Awesomeと同様に、headタグに貼り付けます。そして、AMP用のCSSでfont-family:'フォント名',~;というように指定します。よく分からないという方は、以下の記事が参考になるはずです。

(WordPress)AMP用のプラグインを使っている場合

ampプラグイン

WordPressプラグイン「AMP」を使っている場合には、下記の記事で紹介されている方法が参考になるかと思います。

参考
WordPressのプラグインでAMP対応
by行き着く先はあんこ さん

以下のコード(上記記事の引用です)を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です(下画像参考)。なお、複数のフォントを一気に指定することもできます。

Fadfa 11

コードの青字の部分はFontAwesome用のコードです。FontAwesomeのバージョン(コードの4.7.0の部分)が変わっていない限り、とくに変更する必要はありません。詳しくは、こちらの記事をご覧くださいませ(再掲)。

参考
WordPressのプラグインでAMP対応
by行き着く先はあんこ さん

参考:「AMP for WP」を使っている場合

amp for wp

AMP for WP」というプラグインも合わせて使用している場合、function.phpをいじる必要はなくなります。この記事の前半で紹介した「Font Awesomeのコード」や「Google Fontsのコード」を下記の場所に貼り付ければ完了です。AMP for WPの設定 Advanced Settings Enter HTML in Headerの欄内

「AMP for WP」の使い方は、下記の記事が参考になるかと思います。

参考
WordPressをプラグインで簡単にAMP対応
by ロジカル投資さん

サルワカ