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

AMP
この記事は約3分で読めます。

こんにちは。

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

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

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

ホワイトリストに登録されたフォントプロバイダを除き、外部のスタイルシートはサポートされていません。
代わりにドキュメントインライン「style amp-custom」タグを使用してください。

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

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

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

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

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

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

修正したのは、113行目にある「href=”‘.get_site_icon_font_cdn_url().'”」の部分です。
[code language=”html”]
<?php //WEBフォント読み込み
//Font Awesomeのスタイルの読み込み
echo ‘<link rel="stylesheet" href="’.get_site_icon_font_cdn_url().’">’.PHP_EOL;
[/code]

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

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

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

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

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

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

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

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

カスタムフォントの追加
AMP ページでは外部のスタイルシートを使用できませんが、カスタムフォントは例外です。ページにカスタムフォントを埋め込む方法には ...
スポンサーリンク
ブログ
管理者について
Y2

2014年7月よりブログ開始。
2015年6月よりGoogle AdSenseに参入。
インターネットを使ったお金の稼ぎ方やPCに関する作業記録も紹介。

ネットでお金を稼ぐ男のブログ

コメントをどうぞ

トップへ戻る