How to Add Google Fonts to Blogger

Google offers free fonts service known as Google Fonts (previously known as Google web fonts). There are 707 font families in the collection right now.

If you want to install custom fonts in Blogger, Google Fonts directory is the best place to begin your search for custom fonts. You may find your desired custom fonts from the Google Fonts collection.

We know that blogger already has a lot of Google Fonts and they can be configured at the Blogger template designer.

Follow the below steps to use the Google fonts in the Blogger.

  • Navigate to Template > Customize > Advanced
  • From there, you can select and apply Google Fonts that are already available on the Blogger to different parts of your blog.

If you don’t find your desired font in the Blogger, you can add fonts to Blogger manually. Let’s get started.

Add Google Fonts to Blogger

Video Tutorial

Steps

  • Go to the Google Fonts page.
  • Choose options on the left side to search, organize and filter the fonts as per your need. You can preview the fonts in different sizes for all the fonts.
  • Once you find your desired font(For instance, I’ve selected lato font), click on "Quick-use" icon.
Quick use icon
  • On the next page, choose the styles and character set of the font.
  • Also, you can see a meter on the right side of the screen. The meter tells you the impact of the font on page load time.
  • Now, under the standard section, you can find a line of code like this
Google Fonts code
  • Copy the code.
  • Log into your Blogger account.
  • Go to Template > Edit HTML
  • Before doing any changes in the blogger template, I highly recommend you to take a backup of your blogger template.
  • Find <head> tag. Paste the code under the <head> tag.
  • In Blogger, you need to add a trailing slash to the end of the code (right before the ending angular bracket) like this
Google Fonts code with trailing slash
Add Google Fonts code on Blogger
  • If you don't add the trailing slash, it will result in an error. Click on "Save template" button.

That's it, you’ve added the Google Fonts to Blogger.

The next step is to use the Google Fonts in Blogger.

  • Scroll down the Google Fonts page. You can see a section like this
Use Google Fonts on Blogger
  • Copy the code. This code is the font family code generated for your font.

If you want to use Google Font for the full page, add the following code

.post-body {

font-family: 'Lato', sans-serif; }

You can use the font only for parts of your blog. For instance, if you want to change your blog header font in Blogger, add this code

.Header h1 {

font-family: 'Lato', sans-serif; }

You can add the above code in Template > Customise > Advanced > Add CSS

Alternatively, you can also add the code in the CSS selector of the template. Save the template. Now, Google Fonts will appear in your blog.

You can use the same method to apply fonts to different parts of the blog.

I hope that the information in this post is useful to you. If you find the information in this post useful, share this post with your friends.​

Also see:

Comments (3)

  1. nagendra
    • Thirumal raj
  2. Rebbekah

Share Your Thoughts

3 Shares
Tweet
Share
+1