Using custom fonts on blogger sites is easy to process. In this tutorial, we are learning about how to use google fonts on blogger sites. Using fonts on blogger sites, you need to have a CDN link to the fonts. Without CDN links you are not able to used fonts on blogger.
If you are trying to use fonts that are not available on google fonts then first, you need to create CDN links to the fonts.
CDN stands for Content Delivery Network is a geographically distributed network of proxy servers and their data centres.
But if you want to use your custom fonts then you need to first convert them to the CDN links. It is an easy task to do. First, you need to find Websites that allow to upload of custom fonts and provides CDN links.
- 5 tips to make professional Linkedin Profile
- 10+ Adobe Illustrator Plugins
- Best websites to download free mockups
- How to add a reaction button on blogger sites
- 10+ useful Gmail extension
Step of Use Google Fonts on Blogger Sites
1. Choose Fonts on Google
While choosing fonts for your sites there you need to know some important points. Most of the sites used sans serif fonts for the website. It looks very good for websites.
After choosing the fonts, then choose the style of the fonts. Choosing the style of the fonts, there you can get two options such as import or links. Just you can copy the CDN links and open the blogger dashboard. And my recommendation is that if you are using fonts for websites then google fonts are very useful for you.
2. Paste CDN Links on Blogger
There you need to paste CDN links below the head. After pasting the code there are some errors shown by google fons. The first thing is you need to add amp; on every & character. Because we are using XML code in blogger so XML code can throw errors on that.
And the second error is crossorigin text on the CDN links. It is not accepted by blogger XML code. So, you need to remove it.
3. Change every Fonts Name in your fonts
There is another option you can see o google fonts. That is font-family names. It looks like this:
font-family: 'Roboto', sans-serif;
And you need to change the font family name in blogger. You need to change every fonts root on blogger. The root looks like this:
- --font-head: Poppins, sans-serif ;
- --font-body: 'Noto Sans', sans-serif ;
- --font-code: 'Fira Mono', monospace ;
- --font-head: 'Roboto', sans-serif ;
- --font-body: 'Roboto', sans-serif ;
- --font-code: 'Roboto', monospace ;