当サイトのリンクにはアフィリエイト広告が含まれています

AMPでFont AwesomeなどのWEBフォントを読み込む方法

WEBフォント By シェフ

自作の無料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フォントが使えないから、画像で対応しよう!」なんて方もいるかもしれませんが、今回の方法で読み込めるので、ぜひお試しあれ!


カテゴリー:WEBフォント

シェフ

このサイト「Fantastech」を運営している人