フォントの追加

AMP では、ドキュメントの読み込み時間をできるだけ高速にするために、外部スタイルシートを使用できないようになっています。ただし、フォントはこのルールの例外となっています。

AMP ページにカスタムフォントを埋め込むには、次の 2 つの方法を利用できます。

このチュートリアルでは、<link> タグを使用してページにフォントを追加します。次のように <head> にスタイルシートのリンクを追加して、Raleway フォントをリクエストします。

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Raleway"
/>

次に、CSS の body セレクタを次のように更新して、Raleway への参照を含めます。

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

ページを更新して、新しい外観を確認します。また、AMP Validator の出力をチェックして、この外部スタイルシートのリクエストに関するエラーが出ていないことを確認します。

ウェブフォントはウェブサイトのパフォーマンスに悪影響を与えかねません。これは高速な AMP サイトであってもです。font-display CSS プロパティを使用して、フォントの読み込み動作を最適化しましょう。

これで AMP のニュース記事は完成です。ページは次のようになります。

完成したニュース記事