

This element is optional and if it omitted the default value of 3000 gets used. After this time passes the custom font is no longer available on the page. 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.


This gets done by defining the tag in the page's. Next, you need to define which fonts you need the script to take care about and what to do with the elements using them. In order to use this AMP additional component you first need to call it by placing a tag in the page's header like this: 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. 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. 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. 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. Leaving aside the AMP restrictive policy let's focus on the speed. 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 tag or with a rule included in the tag which surprisingly has no restrictions for the font file sources so far. 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. Although, it has not only pros but cons too. It is just an effective tool that allows us to optimize the work of our websites on the mobile platforms. We suppose, there is no need to remind you what AMP project is about.
