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.
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-wei…
Adding Custom Fonts for Blogger With AMP HTML - Whitelisted Font Providers
Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAdd 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 Providersirsah
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Blogger template or any website HTML with AMP integration can not include external stylesheets. However there are several font service provi....
Disqus Comments
Facebook Comments
Most Popular This Week
Remove "Not Secured" Warning at Browser Address Bar for Blogger Blogs
Recently, modern web browsers have applied new rules for web pages with forms & input fields. A lot of our readers asked us why the ...
Blogr-AMP for Ads & Monetization
Describes the usage of Blogr-AMP theme ads placement using amp-ad component & tags required with AMP HTML Blogger template framework. ...
Theme Version History (V1)
It is always good to provide a version history to keep track on your Blogger template/theme changes & updates. This will provide your te...
Blogr-AMP for Social Shares
Replacing default Blogger template social share buttons, Blogr-AMP Blogger template uses AMP HTML amp-social-share components & amp-soc...
Blogr-AMP (V2) Blogger Theme Admins Quick Access Tools & Help Feature
New added in Blogr-AMP version 2 , Blogger blogs admins can get quick access to several useful tools & resources while customizing theme...
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...