Intent to implement: Font loading control in AMP

[cramforce]

Implement an API for controlling timeouts on font loading. Currently most browsers time out after 3 seconds but Safari never times out.

The new amp-font tag allows adding and removing CSS classes from document.documentElement based on whether a font was loaded or is in error-state.

<amp-font 
    font-family="My Font" 
    timeout="3s" 
    on-error-remove-class="my-font-loading" 
    on-error-add-class="my-font-missing"></amp-font>
<amp-font 
    font-family="My Other Font" 
    timeout="3s"
    on-load-add-class="my-other-font-loaded"
    on-load-remove-class="my-other-font-loading"></amp-font>

The tag observes loading of a font and when it loads executes the optional attributes on-load-add-class and on-load-remove-class and when there is any error or timeout runs on-error-remove-class and on-error-add-class.

Using these classes authors can guard whether a font is displayed and get the following results:

• get a short (e.g. 3s) timeout in Safari similar to other browsers
• implement FOIT where the page renders with no text before the font comes in
• increase timeout to over 3s in non-Safari (Do we want to allow that?)
• make the timeout very short and only use a font if it was already cached.

Implementation:
I believe this is the best article on the topic: https://dev.opera.com/articles/better-font-face/ and this is the best / smallest library: https://github.com/zachleat/fontfaceonload

CC @pbakaus

[dvoytenko]

This will be a builtin, right?

[cramforce]

No, since it does not actually trigger the font load performance is not critical I think.

[dvoytenko]

But timeout will be since "amp-font" loaded? Or since runtime started?

[dvoytenko]

Also, maybe amp-font-control would be a better name?

[camelburrito]

@cramforce
will the css still contain the @font-face declaration

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}

or should i get the url as an attribute in ?

[dvoytenko]

To confirm, we are not directly downloading @font-face here, but rather monitoring when the existing CSS @font-face has been downloaded.

[cramforce]

Yes, what @dvoytenko says: This is not about triggering font loads, just controlling their effect on the page.

font-face is unaffected, but users need to guard usage of the family with the respective classes.