amp-font
Trigger and monitor the loading of custom fonts on AMP pages.
Required Script | <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script> |
Supported Layouts | nodisplay |
Examples | Annotated code example for amp-font |
Behavior
The amp-font
extension should be used for controlling timeouts on font loading.
The amp-font
extension allows adding and removing CSS classes from document.documentElement
or document.body
based on whether a font was loaded or is in error-state.
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 extension 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
.
These classes are toggled on the documentElement
for standalone documents, and on body
for documents
without a documentElement
i.e. inside a ShadowRoot
.
Using these classes authors can guard whether a font is displayed and get the following results:
- get a short (e.g. 3000ms) timeout in Safari similar to other browsers
- implement FOIT where the page renders with no text before the font comes in
- make the timeout very short and only use a font if it was already cached.
The amp-font
extension accepts the layout
value: nodisplay
Attributes
font-family | The font-family of the custom font being loaded. |
timeout | Time in milliseconds after which the we don't wait for the custom font to be available. This attribute is optional and it's default value is 3000. If the timeout is set to 0 then the amp-font loads the font if it is already in the cache, otherwise the font would not be loaded. If the timeout is has an invalid value then the timeout defaults to 3000. |
on-load-add-class | CSS class that would be added to the document root after making sure that the custom font is available for display. This attribute is optional. |
on-load-remove-class | CSS class that would be removed from the document root after making sure that the custom font is available for display. This attribute is optional. |
on-error-add-class | CSS class that would be added to the document root if the timeout interval runs out before the font becomes available for use. This attribute is optional. |
on-error-remove-class | CSS class that would be removed from the document root if the timeout interval runs out before the font becomes available for use. This attribute is optional. |
font-weight, font-style, font-variant | The attributes above should all behave like they do on standard elements. |
layout | Must be nodisplay . |
Validation
See amp-font rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Ir para Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Ir para o GitHub