Add Google Web Fonts in Blogger blog

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 have been using Open Sans here on this blog 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.

Adding Google fonts on Blogger blogs

It’s not that tough. Lets get started, head over to Google Fonts and pick the font you like to use on your blog.

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.

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

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.

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.

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:

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