AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Add custom fonts

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

  1. Through a <link> tag (white-listed font providers only)
  2. 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=Tangerine">

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 AMP stylesheet:

<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>

NOTE – Fonts included via @font-face must be fetched via the HTTP or HTTPS scheme.