amp-font

WEBフォントの読み込みのタイムアウト制御に使用します。

プラグインの読み込み

amp-fontを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<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>

各種プロパティについて

font-family	対象となるWebフォントのfont-familyを指定します。
timeout	Webフォントロードのタイムアウトを指定します。(ミリ秒) デフォルトは3000(3秒)となります。 0が指定されている場合は、フォントがキャッシュに入っている場合のみロードします。
on-load-add-class	フォントのロードが完了し、表示できる状態になればここで指定したクラスが付与されます。
on-load-remove-class	フォントのロードが完了し、表示できる状態になればここで指定したクラスを削除します。
on-error-add-class	フォントロードが完了せず、タイムアウトを過ぎた場合、ここに追加されたクラスが付与されます。
on-error-remove-class	フォントロードが完了せず、タイムアウトを過ぎた場合、ここに追加されたクラスが削除されます。