自作の無料WordPressテーマ4536の最新版にて、テーマカスタマイザー（と投稿画面）でAMPの有効・無効を切り替える機能を実装しました。
厳しい制約がたくさんあるので、僕のレベルじゃ難しいかなと思っていたんですが、関連ページがたくさんあったおかげで意外とスムーズに対応させることができました。
ただ、中には、いくら調べても解決策がピンポイントで見つからず、苦戦したものもありました。
例えば、WEBフォント関係。AMPでアイコンフォントのFont Awesome（フォントオーサム）を使いたかったんですが、求めているページが見当たらず、英語だらけの世界にまで行ってきましたよ。。
で、今は無事にAMPでもFont Awesomeが使えるようになったので、今回はFont Awesomを含めたWEBフォントの導入方法をご紹介します！
専用スタイルシートの読み込み
<head>タグ内に下記のコードを追加することでFont Awesomeが使えます。バージョンは適宜修正していただければと思います。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">コードを見てわかると思いますが、通常のURLとAMP用とでURLが違います。
こちらが通常のFont AwesomeのURL。これを<head>内で読み込んでも、エラーになってAMPページとして認識されません。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">また、つまづきやすいポイントだと思いますが、圧縮ファイル（min.css）しか読み込めないのでご注意ください。
参考https://github.com/FortAwesome/Font-Awesome/issues/8662
Googleフォントは通常と同じURL
AMPページでGoogleフォントを使いたい方もいると思いますが、こちらは通常のURLと同じなので、URLを変更する必要はありません。
その他のフォント
執筆時点では、下記のフォントも先ほどの方法で読み込むことができます。
- Typography.com
- Fonts.com
URLを変更する必要があるかどうかは、Add custom fontsのページで確認可能で、記載されているAMP用のURLが通常のURLと同じであれば変更する必要がないということです。
すべてのWEBフォントを読み込む方法
また、先ほどのページで紹介されていましたが、AMP用のWEBフォントは、<style amp-custom>タグ内で読み込むこともできるようです。
<style amp-custom>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>「あれ？対応外のフォントを読み込んでるぞ？」と気づいた方もいるかと思いますが、実は、<style amp-custom>タグ内で読み込む場合は、すべてのWEBフォントが読み込めます。
AMPに対応していないWEBフォントを使っている方は、この方法を使いましょう:D
まとめ
プラグインでAMP対応した時は、アイコンフォントが表示されなかったので、AMPページではWEBフォントが使えないと思っていたんですが、ただの勘違いだったようです。
もしかしたら、「WEBフォントが使えないから、画像で対応しよう！」なんて方もいるかもしれませんが、今回の方法で読み込めるので、ぜひお試しあれ！
