Google AMP Font Awesome Icons Library

Documentation and examples for custom fonts: Google AMP Font Awesome Icons Library.

Google AMP Font Awesome Icons

Google AMP pages can’t include external stylesheets, with the exception of custom fonts and icons. 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 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" type="text/css"/>

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

2. Using @font-face

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

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

  body {
    font-family: "FontAwesome";
    content="";
  }
</style>
NOTE – Fonts required via @font-face must be fetched via the HTTP or HTTPS scheme.

amp.dev font documentation

Read more
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.