How to add custom font in blogger ? — Beginners Guide


How to add custom font in blogger? — There are 152 million blogs on the internet and if you want your blog stand out you need to impress your visitors with little things. You need to be able catch there attention and keep it so that they want to come back.

For catching attention of your visitors then you must use some attractive fonts on your blog so that they like to read your article. So in this tutorial we are going to teach you how to add custom font in blogger from Google font .

How to add custom font in blogger? 

For adding custom font in blogger you must have the font file .ttf or font url . Now the question is where to find the font for free?  Well you can find your favourite font all over the internet There are thousands of website who provides premium web font for free but before use any font please make sure that font is available for commercial use or not. 

If you want copyright free web font then please use font from  Google Font which is provided by Google and it have 1000+ font family. 

How to add custom font in blogger — Google Font

In this method we are going to use Poppins font from Google Font you can follow the same steps with any font which is available in Google Font .


Go to the Google Web Font then find your favourite font and request for embed code . you'll get the code like as below — 
<link rel="preconnect" href="" crossorigin><link href="" rel="stylesheet">

and font family font-family: 'Poppins', sans-serif;  Now open the marked url in your browser from your embedded code. You'll see some css just copy the  /* Latin */  codes ( Remember every font size have different css ) now Paste it Above the ]]></b:skin> of your Template.

Source :


You have installed the font in your template now let's see how to apply custom font in blogger Template. To Apply this font Copy the Font Family from your embedded code in my case my font family is font-family: 'Poppins', sans-serif; 

To apply this font in your Headings — copy the below css and Paste it just above the ]]></b:skin> . Remeber Change the marked font name with your own font name.

/* For Changing font of heading */
h1, h2, h3, h4, h5, h6{font-family: 'Poppins', sans-serif!important; }

If you want to apply the font in your Body Text then Paste the below CSS or your can use both css if you want to change your heading and Body font

/* For changing font of body text */
p, blockquote, div, span, body{font-family: 'Poppins', sans-serif!important;}


Hey ! I hope you like this post if have any questions related to this topic then feel free to ask anytime . We are always here for you !