ホームページ制作でよく使用するフォントメモ

Fri, 31 May 2024 00:00:00 +0000

明朝体

Wed, 20 Feb 2019 00:24:47 +0900

AMPページでFont-Awesomeのウェブフォントを使うことができるということで、埋め込んでみたところ、テストページではアイコンが正常に表示されたので、公開ページに適用したところ、数日後にGoogleの検索結果からAMPマーク**が表示されなくなりました。

なぜだろう？と、Google Search Consoleを久々に開いてみたところ、AMPページに問題があるというエラーの通知がありました。

「Google検索結果には表示されません」と、無効なAMPページとされていました。

AMPページでFont-Awesomeを使うために、以下のようなコードでCDN経由のCSSを読み込んでいました。これがいけなかったみたいです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

これの何がいけないかというと、cdn.jsdelivr.netから読み込んでいるということ。本家のuse.fontawesome.comよりもcdn.jsdelivr.netから読み込む方が速いかな？と思って使ったのがいけなかったみたいです。

PC用のページはこれで読み込んでいますが、AMPページではこれが警告の原因となり、Googleの検索結果にAMPマークが表示されなくなりました。

以下のページを見ると、- タグでFont-Awesomeを読み込む場合はAMPプロジェクトのホワイトリストに登録されたCDNでないと使えないみたいです。

スタイルシートで**@font-face**を使えば特に読込先に制限なくWEBフォントを読み込むことができるみたいです。

以下のいずれかのCDNからの読み込みであればタグで読み込んでもエラーが出ずに使えるようです。

以下のページにあるFont-AwesomeのCDNのコードから読込をすることで無事解決できました。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

Google Search Consoleで再検査したところ有効なAMPページになりました。