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.
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).
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.
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.
For Section 3: Add this code to your website, click on the @import tab.
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>
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:
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: 'Lobster Two', cursive;
It should look something like this once you have pasted the font family info:
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.
