Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

amp-font

Description

Trigger and monitor the loading of custom fonts on AMP pages.

Required Scripts

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Supported Layouts

예제

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.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기