Google AMP Custom Fonts Library

Google AMP Custom Fonts

Google AMP pages can’t include external stylesheets, with the exception of custom fonts. You can embed custom fonts into your page in two ways:

• Through a <link> tag (white-listed font providers only)
• Via @font-face (no restrictions, all fonts allowed)

1. Using <link>

Use a <link> tag (usually in the head of your page), like so:

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

The following origins are whitelisted and allowed for font serving via link tags:

• 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. Using @font-face

Alternatively, you can use @font-face within your Google AMP stylesheet:

<style amp-custom>
  @font-face {
    font-family: "Roboto";
    src: url("https://somedomain.org/fonts/Roboto.ttf");
  }

  body {
    font-family: "Roboto", serif;
  }
</style>