AMP Font

Overview

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="https://cdn.ampproject.org/v0/amp-font-0.1.js"></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

Behavior

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:

<amp-font
      layout="nodisplay"
      font-family="My Font"
      timeout="3000"
      on-error-remove-class="my-font-loading"
      on-error-add-class="my-font-missing"></amp-font>
  <amp-font
      layout="nodisplay"
      font-family="My Other Font"
      timeout="1000"
      on-load-add-class="my-other-font-loaded"
      on-load-remove-class="my-other-font-loading"></amp-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

Attributes

font-family

The font-family of the custom font is loaded.

timeout

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.

on-load-add-class

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.

on-load-remove-class

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.

on-error-add-class

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.

on-error-remove-class

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.

layout

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="https://fonts.googleapis.com/css?family=Tangerine">

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

Typography.com: https://cloud.typography.com

Fonts.com: https://fast.fonts.net

Google Fonts: https://fonts.googleapis.com

Font Awesome: https://maxcdn.bootstrapcdn.com

2. Operating @font-face

Alternatively, you can certainly 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>

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