How to Add Google Web Fonts to Your Blogger Blog

I earn commissions for purchases made through links in this post.

In this tutorial, I’ll show you how to upload any Google Web Font to your Blogger blog. There are a few ways to do this, but this is how I do it.

This tutorial is best suited for those who have some CSS knowledge. For this tutorial I’m using Blogger’s “Simple” template.

Here’s an example of a custom Google web font installed on our Lemon Macaron template.

custom google fonts

Step 1

Before we begin, I always recommend backing up your current template before making any changes (just in case something goes wrong).

You can do this in your dashboard by going to Template > Backup/Restore (located in the upper right hand corner) > Download full template.

Step 2

After you backup your template, click on Edit HTML (we’re still in the “Template” tab).

edit html

Step 3

Leaving this page open, open a new tab or window and head over to the Google Web Fonts website. Search for the font you would like to use and select Quick Use.

quick use

I’ve chosen to use the ‘Lobster Two’ font.

Step 4

For Section 1: Choose the styles you want, choose the styles your want available for your font (you can select multiple styles). Keep in mind that selecting too many styles can slow down your blog. I’ve selected Normal 400 as you can see below.

select styles

For Section 3: Add this code to your website, click on the @import tab.

import font

Step 5

Copy the information in the @import box.

Now, leaving this page open, go back to your blog (where you selected Edit HTML). We’re going to paste the font import code into your template.

Look for the follow text located towards the beginning of the template editor (usually located on lines 13 or 14):

 <b:skin>...</b:skin>
body code

Once expanded, paste the information that you copied from the @import box on the Google Web Fonts website, the following text:

/* Variable definitions

It should look like this:

variables

Click on save template. Your font has now been imported! Now you can place the font family where you want it to display in your template.

Step 6

Quickly, I’ll show you how to use your newly imported font. In this example, I’ll be using the font for my post title. In the HTML editor search for:

h3.post-title, .comments h4

Remove the following line:

font: $(post.title.font);

and replace it with the text listed on Section 4: Integrate the fonts into your CSS on the Google Web Fonts website.

font family
font-family: 'Lobster Two', cursive;

It should look something like this once you have pasted the font family info:

add custom font

Since we selected Normal 400 for our style (see step 4), we will also need to add the following below h3.post-title, .comments h4 {

font-weight: 400;

Your completed code should look something like this:

h3.post-title, .comments h4 {
  font-family: 'Lobster Two', cursive;
  font-weight: 400;
  margin: .75em 0 0;
 }

Once you have done this, be sure to save your template.