Documentation and examples for custom fonts: Google AMP Custom Fonts Library.
Google AMP pages can’t include external stylesheets, with the exception of custom fonts. You can embed custom fonts into your page in two ways:
<link>
tag (white-listed font providers only)@font-face
(no restrictions, all fonts allowed)1. Using <link>
Use a <link> tag (usually in the head of your page), like so:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
The following origins are whitelisted and allowed for font serving via link tags:
2. Using @font-face
Alternatively, you can use @font-face
within your Google AMP stylesheet:
<style amp-custom>
@font-face {
font-family: "Roboto";
src: url("https://somedomain.org/fonts/Roboto.ttf");
}
body {
font-family: "Roboto", serif;
}
</style>
@font-face
must be fetched via the HTTP or HTTPS scheme.