How To Use Custom Google Fonts On Your Blogger Blog

Hey there! What's up...

Are you a blogger and publishing your posts on blogger?
Do you want to customize the font on your blog and make your posts look more attractive & eye-catching?

Then don't worry.

In this guide I will show you how to change/customize font on your blogger's blog.

By default, blogger provides you very few fonts which you can use while publishing your post.

The fonts you will find on blogger are as below,
Default font, Arial, Courier, Georgia, Helvetica, Times, Trebuchet & Verdana.

So, this are the fonts that google's blogger offers you.

But what if you want to use the font which is not listed above?

Here is the solution for that.

Also check out : How to add simple table in your blogger post

How To Change/Customize Fonts On your Blog

Here, in this guide we are talking about changing the default font of our blogger theme (means entire font on our blog will change i.e Titles, Headings etc...). After following this guide, by default every post you publish will show the same font which you set as your default font.

So, let's see this easy guide.

First of all you need to choose the font which you want to use on your blog. For that, go to Google Fonts website and find out the font of your liking.

Once you find out the font, click on that font and select the different font style,
For example,
Regular 400, Regular 400 italic, Medium 500, Medium 500 italic, Bold 700, Bold 700 italic etc...
(you can select more than one style at a time)

Here, in my case I selected two different fonts namely Playfair Display & Caladea.

The font style which I have selected for the above two fonts are as shown in the below image.

After choosing fonts & font style click on Embed. You will get a simple code which you have to add in your blogger's theme.

In my case,  the code is as below.

<link href=",wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">

Now, sign in to blogger and go to Theme.

There, Click on Edit HTML.
(see below image)

Now, you have to add the above looking code in the <head> section of the HTML.
(see below image)

After adding above code, now you have to change the font-family in the HTML code.
For example,
In my case previous default font was Noto Sans and I want to change it with my new default font Playfair Display.

So, I replace Noto Sans with Playfair Display in entire HTML. (press ctrl+F to find)

After replacing font-family, click on save.

Now your default font has been changed.

Known error & its solution

After following the above guide, at the end when you click on save button you may get the error saying that,

Error parsing XML, line 5, column 71: The reference to entity "display" must end with the ';' delimiter


If you get the above error then you just have to replace & with &amp; in the line which we added earlier.

Hence, our new code will look like,

<link href=",wght@0,400;0,700;1,400;1,700&amp;family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap" rel="stylesheet">

That's all guys!

I hope you like the above guide. Feel free to ask any queries in the comment box.

Good Bye 👋🏻, see you in the next post.

Post a Comment