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.
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.
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.
<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
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.
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).
<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
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>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.