Add fonts to AMP webpage

You can add fonts to AMP web pages directly by adding a link to those fonts which are allowed.

<!-- You can add fonts using link tag or using @font-face -->
<!-- Add fonts using google fonts -->
<!-- Add below within head tag -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" type="text/css">
<style amp-custom>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

By default, you can not link your external stylesheets to your AMP pages but in the case of adding fonts to your website, you can add them directly using the link tag.

In the code snippet, we are adding the 'Roboto' font family from google fonts.

Was this helpful?