AMP CSS Custom Fonts and Icons Library

Documentation and examples for custom fonts: AMP CSS Custom Fonts and Icons Library.

Custom Fonts and Icons

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

2. Using @font-face

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

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

  body {
    font-family: "Roboto", serif;
  }
</style>
NOTE – Fonts included via @font-face must be fetched via the HTTP or HTTPS scheme.

Font Awesome Icons

Add this tag in "head" tag, and use it's classes in your AMP page.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

Web Application Icons

Accessibility Icons

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

Spinner Icons

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Medical Icons

amp.dev font documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.