AMPページでFont Awesomeを利用する設定方法

サイトをAMP化した時、通常ページでFont Awesomeのアイコンフォントを使用している場合は、AMPページでもFont Awesomeを利用したいと考えるサイト運営者の方は多いと思います。Font Awesomeを標準でサポートしているテーマでAMPもサポートしている場合は、そのまま使える場合もありますが、サポートしていないテーマもあります。プラグインでAMP化している場合は、Font Awesomeを使用する設定作業が必要となります。

AMPページでFont Awesomeを利用するための設定方法

Font Awesomeはアイコンフォントです。そのため、利用方法なども通常のフォントと同様に取り使います。AMPでのカスタムフォントを追加する手続きを使用することで、Font Awesomeが利用可能となります。<link>タグを使用して<head>タグ内にFont Awesomeのアイコンフォントが格納されたCDNとリンクを行うことで、Font AwesomeをAMPページで利用できるようになります。

備考：
SimplicityとCocoonは、デフォルトでFont Awesomeが通常ページ、AMPページで使えるようになっています。<head> タグ内のコードの設置などの作業は必要ありません。
WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法

<link>タグを使用してAMPページにFont Awesomeのフォントを組み込む

以下のコードを、AMPページの<head>タグ内に追加します。

上記は、Font Awesome 4.7のアイコンフォントが格納されているCDNのURLへのリンクコードになります。

Font Awesome <link>タグの<head> タグ内への設置方法

Font AwesomeのCDNとリンクする<link>タグの<head> タグ内への設置方法は、サイトのAMP化の方法によって異なります。テーマでAMP化した場合は、そのテーマのAMP機能を利用するか、子テーマを編集して、<link>タグのコードを設置します。プラグインでAMP化した場合は、プラグインの機能を使用するか、子テーマを編集してコードを挿入します。

設置方法については、テーマやプラグインのドキュメントやサポートをご利用されることをお勧め致します。順次、代表的なAMP化するプラグインを使用した場合の設定方法について記事を投稿予定です。

AMP for WordPress にFont Awesomeリンクコードを挿入する方法