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