amp-font
Introduction
Learn how to use the amp-font
component to trigger and monitor the loading of custom fonts on AMP pages.
Setup
Import the amp-font
component.
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
Define custom CSS rules to style your document depending on whether a font was loaded successfully or not. Find out about all the supported css classes here.
<style amp-custom>
:root {
--color-error: #B00020;
--color-primary: #005AF0;
}
@font-face {
font-family: 'UnavailableFont';
font-style: normal;
font-weight: 400;
src: url(fonts/UnavailableFont.ttf) format('truetype');
}
@font-face {
font-family: 'Comic AMP';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP.ttf) format('truetype');
}
@font-face {
font-family: 'Comic AMP 2';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP2.ttf) format('truetype');
}
.unavailable-font-loaded .unavailable-font {
font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
color: var(--color-error);
}
</style>
Existing font
The amp-font
components needs to be embedded inside the body or the head. Use the attribute timeout
to specify the time in milliseconds to wait until the font becomes available. This attribute is optional and it's default value is 3000. Use on-error-remove-class
, on-error-add-class
, on-load-remove-class
, on-load-add-class
to specify the CSS classes to be used if the font loads correctly or not. This sample demonstrates that amp-font
will add the class comicamp-loaded
to the root element if the font is downloaded.
This text is displayed in red if the font `Comic AMP` is not available.
<amp-font layout="nodisplay" font-family="Comic AMP" timeout="2000" on-error-remove-class="comicamp-loading" on-error-add-class="comicamp-missing" on-load-remove-class="comicamp-loading" on-load-add-class="comicamp-loaded">
</amp-font>
<p class="comicamp">
This text is displayed in red if the font `Comic AMP` is not available.
</p>
Unavailable font
amp-font
will add a class unvailable-font-missing
to the root element in this sample.
This text is displayed in red if the font `UnavailableFont` is not available.
<amp-font layout="nodisplay" font-family="UnavailableFont" timeout="2000" on-error-remove-class="unavailable-font-loading" on-error-add-class="unavailable-font-missing" on-load-remove-class="unavailable-font-loading" on-load-add-class="unavailable-font-loaded">
</amp-font>
<p class="unavailable-font">
This text is displayed in red if the font `UnavailableFont` is not available.
</p>
Using only cached fonts
Set timeout="0"
to load the font only if already in cache.
This text is displayed in red if the font `Comic AMP 2` is not cached.
<amp-font layout="nodisplay" font-family="Comic AMP 2" timeout="0" on-error-remove-class="comicamp2-loading" on-error-add-class="comicamp2-missing" on-load-remove-class="comicamp2-loading" on-load-add-class="comicamp2-loaded">
</amp-font>
<p class="comicamp2">
This text is displayed in red if the font `Comic AMP 2` is not cached.
</p>
If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.
Go to Stack Overflow An unexplained 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.
Edit sample on GitHub-
Written by @kul3r4