フォントを追加する

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 検証ツールの出力をチェックして、この外部スタイルシートのリクエストに関するエラーが出ていないことを確認します。

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

;(