Adding custom fonts to AMP pages

One important aspect of web page design that we haven't looked at yet is the use of custom fonts. Not only is the choice of font important to the reading experience, but fonts can help differentiate a web page and give it its own identity. The fonts you choose for your web pages will be largely dictated by your personal preference and the theme of your website, so we won't make any font recommendations here. Rather, we'll demonstrate how you can get your preferred fonts to display, and leave the choice up to you.

There is already a range of web-safe fonts available on most systems. These include:

• Arial/Helvetica
• Courier/Courier New
• Georgia
• Times/Times New Roman
• Trebuchet MS
• Verdana

For many web pages, this will be enough to provide a decent reading experience, so you don't necessarily need to include any other fonts. Custom fonts are desirable in many cases, however, so let's see how to add them to AMP pages.

AMP doesn't permit the inclusion of external stylesheets in your markup, so the use of <link rel="stylesheet" ... > is generally banned, except for fonts. Custom fonts can be loaded in two ways:

1. Using <link rel="stylesheet"...>:

<link  rel="stylesheet">

Note that in this approach you may only include fonts from the following whitelisted providers:

• Typography.com: https://cloud.typography.com
• Fonts.com: https://fast.fonts.net
• Google Fonts: https://fonts.googleapis.com
• Font Awesome: https://maxcdn.bootstrapcdn.com
  

1. Using @font-face in your <style amp-custom> CSS, for example:

<style amp-custom>
  @font-face {
    font-family: "Ubuntu";
    src: url("http://example.com/fonts/ubuntu.woff")
    format('woff');
  }
  body {
    font-family: "Ubuntu", serif;
  }
</style>

Google has a very nice font picker at https://fonts.google.com/. You can use it to choose a font and it will give you the code you need to include in your page, ensuring that your page will still validate.