Google Font library is a great source of web fonts for web designers and developers. All of the fonts hosted there are free to use on any of your commercial or personal projects. I was using Open Sans here on this blog earlier with the help of Google Web Fonts.

How Google Web Fonts work?

You may browse the available fonts in the library, choose your favorite ones and grab the code to place on your website to make use of those fonts. Alternatively, you may also download the fonts to use in your graphic works, but that is beyond the scope of this article.

As I told you in the beginning of the post, I’m making use of a Google font right here on this blog (I’m using Open Sans font). In this post, we are going to know the hassle free ways to use Google Fonts on our Blogger blog.

Installing Google fonts on Blogger blogs

Note: Blogger already supports a bunch of Google fonts that can be configured through the Blogger Template Designer.

Enabling Google fonts through Blogger template designer

Navigate to the Blogger Template Designer (Blogger Dashboard > Template > Customize) and come to the Advanced tab.

Google fonts in Blogger Template Designer

Here you may select a Google font from the list and apply the changes accordingly.

Adding fonts manually

Suppose you didn’t find your desired Google font in the Blogger Template designer. You may add it manually by following the below steps. Starting off, head over to Google Fonts and pick the font you like to use on your blog.

Choose the font from Google font Library

Tip: You may also enter some sample preview text and set it size to see how a particular font will look on your website.

For demonstration, I’ve chosen Roboto Slab font. Next, we just need to click the Quick Use icon as highlighted in the following screenshot:

We are on the quick use page now. Choose the styles you want to use on your blog for that font, you can also see the site load meter on the right-hand-side that tells you how much extra load time that font will add to your blog. So, choose fonts and their styles wisely for a good blog speed.

Choose the font styles for the Google font

You may also choose additional character sets if your blog makes use of them, otherwise skip choosing a character set.

Choose the character set for Google font

Now comes the coding part. Copy the code for your font, either the standard one (<link href=...), or the JavaScript (don’t go for @import as it’s not the best way to call CSS). I would recommend picking the JavaScript as it is asynchronous, and won’t block the loading of your website while loading fonts.

Code for Google Web Font

Now come to your blog dashboard, navigate to the Template section, Edit HTML and look for </head> tag. Place the copied code just above this tag and save the template.

Adding Google Font code to Blogger template

That’s it! We’ve added the web font to our Blogger template. Next section explains how to use this font on your blog.

Using the Google Web font on your blog

Now, whenever you need to use this font in your CSS styles, follow the below fashion (it’s the basic CSS):

h1 {
font-family: 'Roboto Slab';

Do edits in your Blogger stylesheet accordingly if you want it’s elements to make use of the font we’ve just added to our template. Well, this blog is itself a demo of Google Web fonts implementation on Blogger, but still I’ve done another small demonstration of it below:

Blogger DIY

Font used: Roboto Slab

Hope you enjoyed the article and found it useful. Feel free to speak your thoughts, questions, and suggestions. Thanks 🙂