AMP Font


We suppose, there is no need to remind you what AMP project is about. It is just an effective tool that allows us to optimize the work of our websites on the mobile platforms. Although, it has not only pros but cons too. The overall AMP validation policy is rather strict – like you can't have scripts other than the ones they provide you, you can't have external style sheets at all and even if you try including some custom styling in the style tag they have for it – it should not exceed 50K in size otherwise the validation fails.

We do however still need some fonts, don't we? So the AMP standard allows including your own fonts – either from a short list of allowed font servers and a <link> tag or with a @font-face rule included in the <style amp-custom> tag which surprisingly has no restrictions for the font file sources so far.

Leaving aside the AMP restrictive policy let's focus on the speed. Font files still remain an external asset requiring being loaded in order the page with AMP Article to display properly so it indeed could eventually slow down your pages if at a specific point the font destination is hardly or not accessible at all. For handling this possible scenario the AMP development team has added an additional component called amp-font What it does is a monitoring if a specific font has been loaded for a predefined period of time and takes some actions according to what happens. It can either add or remove classes to the tags utilizing the font in both cases – upon the font has been successfully loaded or in case if the load fails. An additional cool approach is setting the timeout to a very small number or zero so the browser utilizes the font only if it has been already taking place in the cache.

The best way to utilize AMP Fonts:

In order to use this AMP additional component you first need to call it by placing a <script> tag in the page's header like this:

<script async custom-element="amp-font" src=""></script>

Next, you need to define which fonts you need the script to take care about and what to do with the elements using them. This gets done by defining the <amp-font> tag in the page's <body>. In order to function properly it needs to have some attributes defined like layout="nodisplay", that's the only AMP layout allowed for this element, font-family="Custom Font 1" to target the specific font you need to be handled,timeout=" ~ time in milliseconds ~ " which is the time the script will wait for the font file to load. After this time passes the custom font is no longer available on the page. This element is optional and if it omitted the default value of 3000 gets used.

We can also define the classes to be added to document.documentElement in case the font has loaded via the optional on-load-add-class attribute or respectively – remove some via on-load-remove-class attribute.

Additionally – if the font fails to load, then some classes could be added or removed to document.documentElement or document.body as well with the on-error-add-class and on-error-remove-class attributes. All the attributes concerning classes being added or removed in either case are optional and if you don't specifically need them they can be safely omitted.

Expanded detailed suggestions relating to AMP Fonts


The amp-font addition ought to be applied for managing timeouts on font launching.

The amp-font extension authorizes adding and taking away CSS classes from document.documentElement formed on regardless if a font was loaded or else is in error-state.

For example:

      font-family="My Font"
      font-family="My Other Font"

The expansion spots loading of a font and once it loads performs the optional properties on-load-add-class and on-load-remove-class and the moment there is any sort of the error or a timeout manages on-error-remove-class and on-error-add-class.

Operating all of these classes creators have the ability to protect whether a font is showcased and gain the following effects:

- get a very short (e.g. 3000ms) timeout in Safari the same as the different internet browsers

- employ FOIT where the web page with an AMP navigation renders with no text prior to the font shows up

- prepare the timeout very brief and just employ a font supposing that it was currently cached.

The amp-font addition gets the layout value: nodisplay



The font-family of the custom font is loaded.


Time in milliseconds after which we don't wait on the customized font to become obtainable. This quality is not required and its default value is undoubtedly 3000. If the timeout is arranged to 0 at that point the amp-font launches the font assuming that it is actually in the cache, otherwise the font would not be simply loaded. Supposing that the timeout has an invalid value at that point the timeout defaults to 3000.


CSS class that would certainly be provided to the document.documentElement right after ensuring that the customized font is accessible for the screen. This property is optionally available.


CSS class that would be cleared away from the document.documentElement and document.body after making sure that the customized font is attainable for display. This specific characteristic is not required.


CSS class which would be brought in to the document.documentElement, assuming that the timeout period runs out just before the font ends up being provided for usage. This kind of property is optionally available.


CSS class that would be taken away from the document.documentElement and document.body, in the event that the timeout period expires previously the font becomes accessible for usage. This characteristic is alternative.

font-weight, font-style, font-variant

The characteristics mentioned earlier really should all behave like they do on regular components.


Must be nodisplay.

Bring in custom fonts

AMP web pages can't involve outside stylesheets, except customized fonts. You are able to set custom-made fonts within your web page in two ways:

1) Through a <link> tag (white-listed font suppliers only).

2) Through @font- face (no limits, all fonts enabled).

1. Using <link>

Employ a <link> tag ( commonly inside of the head of your page ), like so:

<link rel="stylesheet" href="">

The following sources are whitelisted and empowered for font acting using link tags:

Google Fonts:

Font Awesome:

2. Operating @font-face

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

<style amp-custom>
    font-family: "Bitstream Vera Serif Bold";
    src: url("");

    font-family: "Bitstream Vera Serif Bold", serif;

Final thoughts

Basically, that's the way the AMP standard introduces its amp-font element monitoring if a custom font has been successfully loaded on the page in the given timeout. It's quite flexible since you can define as many amp-font tags as needed each one targeting a different custom font – for the cases when you have a few of them. This way, if you have a heavier font appearing below the fold you can safely add a higher timeout for it and a shorter one for the content being displayed at the very top.

In this line of thoughts, maybe a remark should be added – since AMP pages are not so much a standalone pages but rather a mirror alternatives eventually giving the users from devices with limited capabilities access to the pure content out there, it might be a good idea, with regards to legibility and ease of reading, limiting our choices to the custom fonts that are not so fancy but rather beautiful and clean, and which might give the user nice and fluent reading experience. But that's of course up to you as web designers to decide.

Check out several online video tutorials about AMP

Related topics:

AMP Font main documents

Amp-font feature by instance

AMP Font - approval rules

Best Free AI Website Builder

Generate AI websites with a simple prompt! Type in any language, export in zip.

AI Website Builder

Best Free Website Builder Software

Create awesome websites offline! No coding. 9900+ templates. Edit and save locally, upload wherever.

Free website builder download for Win, Mac, Linux!

Latest Posts

  1. AI website maker and generator - experience the future of website creation with AI .
  2. Free AI website generator and creator - create a website design with AI.
  3. Best Website Builder AIBest Free AI Website Builder - Create Website with AI
  4. Best Website Builder for Interior Designs, Digital Marketing Agencies, Travel Agencies
  5. Best Website Builder for Churches, Authors, Consultants, Magazines
  6. Website Builder for Education, Software Companies, Designers, Videos
  7. Website Builder for Beginners, Bloggers, Writers, IT Companies
  8. Website Builder for Online Stores, Restaurants, Musicians, Real Estate
  9. Podcasts and affiliate marketing Website Builder
  10. Best Website Builder For therapists and nonprofits
  11. Website Builder For SEO and portfolio
  12. Best Website Builder For Kids & Musicians
  13. Photographer & Artist Website Builder
  14. HTML Code Generator - HTML Code Generator
  15. Web Design Tool - Web Design Program
  16. Landing Page Maker - Landing Page Generator
  17. Easiest Website Builder For Beginners - No Coding Website Builder
  18. Fantastic HTML Constructor with Drag and Drop or Full Code Editor
  19. Eye-catching HTML Generator You Should Try
  20. Best QR Code Generator Free
  21. Top 11 Wix App Alternative Website Builders
  22. Top 11 Free Wordpress Alternatives Services
  23. Instagram Feed Embed
  24. Really Convenient Business Website Builder Overview
  25. AMP format overview
  26. amp-live-list AMP Blog component
  27. AMP Layout & Media queries
  28. Image galleries and AMP
  29. Using AMP with Bootstrap
  30. AMP SEO
  31. AMP and Wordpress
  32. Facebook Instant Articles vs. Google AMP
  33. AMP Form - amp-form extended examples and tricks
  34. AMP Analytics
  35. AMP Carousel, amp-carousel advanced examples and tricks
  36. AMP AD
  37. AMP HTML Advanced Examples, Codes, Tags
  38. AMP IFrame - amp-iframe examples and tricks
  39. AMP Validator - Test AMP pages
  40. What is AMP? - Overview