コクーンでAMPエラー!ホワイトリスト以外のフォントは使えない

こんにちは。

Cocoonのメジャーバージョンが2.0.0にアップしたことでAMPエラーが発生しました。

現在修正をして有効に戻りましたので、その方法について書き留めていきます。

発生したエラーは次のとおりです。

このエラー内容を読んでも今ひとつよく分からないのですが、Fontawesomeに問題があることが判明しました。

公式サイトにも2.0.0にアップデートしたら不具合が発生する可能性があることが示唆されていたので特に驚きはなかったです。

ただ、どのようにしてこのエラーを解消すればよいのかしばらく時間がかかりました。

今のところ、次の方法で修正したら再び有効となりました。

テーマの編集→tmp→amp-header.phpを修正します。

amp-header.phpの111〜113行目。

修正したのは、113行目にある「href=”‘.get_site_icon_font_cdn_url().'”」の部分です。

<?php //WEBフォント読み込み
//Font Awesomeのスタイルの読み込み
echo '<link rel="stylesheet" href="'.get_site_icon_font_cdn_url().'">'.PHP_EOL;

この部分を次の内容で修正します。

amp-header.php内にある103〜105行目にあるコードが該当します。(子テーマは行数が違うので注意)

この場合、105行目が該当しますね。

以下のように修正したらエラーは解消されました。

<?php //WEBフォント読み込み
//Font Awesomeのスタイルの読み込み
echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">'.PHP_EOL;

この修正ではホワイトリストにあるフォントだけが対象となります。

修正するのは親テーマではなく子テーマで行うようにしましょう。

記事の作成にあたり、次のサイトを参考にしました。

カスタムフォントの追加

AMP ページでは外部のスタイルシートを使用できませんが、カスタムフォントは例外です。ページにカスタムフォントを埋め込む...

amp.dev