Add and Using Custom Fonts on AMP Blogger Template
Add an use custom fonts on AMP Blogger Template AMP Google @font-face custom font. How to setup custom fonts Google in AMP Page Blogger. I will explain how to add and apply custom fonts on Google AMP
Add and Using Custom Fonts on the AMP Blogger Theme
Font type is an important element in a blog. Choosing the right font style is really needed, so that the appearance of the website becomes better and easier for users to read. There are now millions of font styles available on the Internet, and may continue to grow every day.
Choosing a font style for the web page display must be matched with your taste, and of course it must be appropriate with the basic appearance of your website.
Currently, there are a lot of third parties that provide thousands of free fonts that you can apply to your blog. Simply import it with the @font-face code on your blog CSS, or simply call it using the <link> tag.
Then, how do I add custom fonts to the Google AMP page? Next I will explain how to add and apply custom fonts on Google AMP.
Using Custom Fonts on AMP Blogger Templates
To implement custom font on Blogger AMP templates is actually same, it's just that Google AMP limits the use of third parties. We can call it by using the <link> tag with rel='stylesheet' or using @font-face.
The following are third parties who are permitted to display fonts via the <link> link tag:
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: https://use.typekit.net
- Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
Add Custom Font from Google Font to AMP Page.
I will give an example of applying Google Font to your AMP page. Go to fonts.google.com and please choose one of the fonts you want. Example: Roboto (Sans serif) .
Click Select this Font, it will show a pop up and a code that you must add before </ head>. Below I will explain how to apply using the <link> tag and CSS @font-face
Use Tag <link>
This is sample of use the <link> tag, that could be add before </ head> in your template:
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/>Using CSS @font-face
If you prefer to use CSS @font-face, you must paste the CSS font-face of the Font between <style amp-custom='amp-custom> ... </style>.
To get the CSS @font-face from the font you want, please open the URL of the font then view the source code by pressing CTRL + U on your desktop browser.
Examples of URLs for Roboto fonts are https://fonts.googleapis.com/css?family=Roboto then click CTRL + U on the keyboard. The source code @font-face will appear for the Roboto font.
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}Next you must add the above code in the <amp-custom> tag. A simple example of the code will be as below.
<style amp-custom>
@font-face {
font-family: "Roboto";
src: url("https://fonts.googleapis.com/Roboto.ttf");
}
</style>Use Fonts on your website.
The final stage is to call the custom font type on your website by using the CSS font-family property. I gave an example below.
body {
font-family: "Roboto", sans-serif;font-size:16px;font-weight:400;
}
Please SAVE changes to your template.
Please note, if you have added a custom font using the <link> tag, you don't need to add it again with CSS font-face.
May be useful :)
Please note, if you have added a custom font using the <link> tag, you don't need to add it again with CSS font-face.
May be useful :)