Our Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

Adding Custom Fonts for Blogger With AMP HTML - Whitelisted Font Providers

Adding Custom Fonts for Blogger With AMP HTML - Whitelisted Font Providers
Blogger template or any website HTML with AMP integration can not include external stylesheets. However there are several font service providers which have been whitelisted by AMP Project team.

In this post, we detail out on how to include custom fonts using Accelerated Mobile Pages on Blogger template HTML or any website.

Add Custom Fonts Icons Blogger AMP Template


Users can embed custom fonts into Blogger template or any HTML webpage with AMP integrated pages in 2 ways:

  • Through a <link> tag (white-listed font providers only)
  • Via @font-face (no restrictions, all fonts allowed)

Use Link Tag


Use a <link> tag (usually in the head of  template HTML), before the amp-custom tag:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

This will grab the 'Roboto' font library from Google Fonts servers.

Then apply the custom font 'Roboto' to your web page <body> in amp-custom style tag like so:-

body {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}

Below are the list of white-listed font provider servers:-

  1. Typography.com: https://cloud.typography.com
  2. Fonts.com: https://fast.fonts.net
  3. Google Fonts: https://fonts.googleapis.com
  4. Font Awesome: https://maxcdn.bootstrapcdn.com

Use @font-face


Blogger template or websites with AMP HTML can also include custom fonts using @font-face directive within their amp-custom style tags for non whitelisted font providers.

Below example using Google Fonts but replace with non whitelisted font providers to include a custom font library.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Then apply the custom font 'Roboto' to your web page <body> in amp-custom style tag right below @font-face :-

body {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}

How to get @font-face src/CSS ?


  1. Go to Google Fonts & select your font to use.
  2. Click the fly-out selected font & select EMBED tab.
  3. Highlight the link src URL provided by Google Fonts.
  4. Right Click & select Go to https://{{URL_OF_FONT}}
  5. Select all text at new browser window & paste codes within amp-custom style tag
  6. Save your work.


For Blogr-AMP Blogger template with AMP ready integration, custom fonts & icons have been pre-installed. Currently, below are Google custom fonts used with theme:-

  1. Body fonts - Roboto
  2. Heading fonts - Roboto Slab
  3. Blog Title - Reightgous
  4. Icons - Material Icons

All custom font comes with web safe font family fallback. If somehow the custom fonts could not be rendered/fetched due to traffic or poor user end internet connections, these fallback font family will be used instead. tag_faces

Contact us for more information on how Blogger blogs can utilize AMP web pages just like other powerful blog-ing platforms or leave a comment below for quick inquiries/discussions.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Add custom fonts using link tag or @font-face on Blogger template with AMP detail guide tutorial & reference to include CSS inside amp-custom tahs in Blogger Template HTML.
Blogr-AMP: Adding Custom Fonts for Blogger With AMP HTML - Whitelisted Font Providers
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Adding Custom Fonts for Blogger With AMP HTML - Whitelisted Font Providers.

Interesting Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Contact Us