AMP

カスタムフォントの追加

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

  1. <link> タグを使用する(ホワイトリストに登録されているフォントプロバイダのみ)
  2. @font-face を指定する(制限なし、すべてのフォントで可能)

1. <link>

以下のように <link> タグを使用します(通常はページの head 内に指定します)。

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

次のプロバイダがホワイトリストに登録されており、リンクタグ経由でのフォント配信が許可されています。

  • Typography.com: https://cloud.typography.com
  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Typekit: https://use.typekit.net
  • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com

2. @font-face

または、AMP スタイルシート内で @font-face を使用することもできます。

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

注意: @font-face を介して追加されるフォントは、HTTP または HTTPS スキームで取得する必要があります。