In this post, we detail out on how to include custom fonts using Accelerated Mobile Pages on Blogger template HTML or any website.
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:-
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- 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 ?
- Go to Google Fonts & select your font to use.
- Click the fly-out selected font & select EMBED tab.
- Highlight the link src URL provided by Google Fonts.
- Right Click & select
Go to https://{{URL_OF_FONT}} - Select all text at new browser window & paste codes within
amp-customstyle tag - Save your work.
For Blogger template with AMP ready integration, custom fonts & icons have been pre-installed. Currently, below are Google custom fonts used with theme:-
- Body fonts -
Roboto - Heading fonts -
Roboto Slab - Blog Title -
Reightgous - 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.