How to Install Custom Fonts in Blogger

How to Install Custom Fonts in Blogger

Hi everyone! Today's post will be part 5 of my blog design series, which will explain how to install custom fonts in Blogger. This tutorial is going to be a bit more technical than my previous blogging posts and will require some intermediate HTML and CSS coding, but hopefully I can explain it well enough so that it's not incredibly confusing. Continue reading to learn how to install custom fonts on your blog! 

1. Choose your Google Web font

Visit the Google Web Fonts Dictionary and browse around until you find your desired font. Once you've chosen one, click on the little box with the right arrow in it to bring up the font's HTML code (scroll down to step 3 on the Google page), which will resemble something like the code below. 

font-installation-blogger-tutorial

Once you've copied the code for your selected font, it's super important that you CLOSE THE CODE by adding / before the >. 
So, once you've done that, your code should now look like this:

2. Edit Blogger HTML

Now that you have the code copied for your specific font, open Blogger and click on Template>>Edit HTML. 

***Note: Before you make any changes to your site's code, make sure to backup your template in case you make a mistake! (Trust me, it's a huge pain in the behind to have to weed through a sea of code in order to locate and fix one tiny little detail.) To do this, click on Template and then click the "Backup/Restore" button on the top right corner of your screen to save your current template to your computer. 

font-installation-blogger-tutorial

B. From here, you want to find the part of your code that says <head>, which should be somewhere right at the top. It should be pretty easy to find, but if for some reason you can't see it, just press "Ctrl F" and type <head> into the search bar. 

C. Once you've located the <head>, paste the code you copied from Google (WITH the / added at the end!) directly underneath it and click "Save Template". 

3. Copy and Paste Font CSS

A. Go back to your Google font page and find step 4 which says "Integrate the fonts into your CSS". Copy this code and head back to Blogger. 

blogger-font-tutorial

B. Click Template>>Customize>>Advanced>> and then scroll down to click "Add CSS". You have quite a few options here, as this is where you'll tell your blog's code where to display the font you installed into your HTML. Here are a few common examples:

To use your font as the blog post title, type h3.post-title and then paste your CSS code from Google beside it in between two "curly" brackets. For example, my code would look like this for the Amatic SC font I chose to use on my tester blog:

h3.post-title {font-family: 'Amatic SC', cursive;}

Here are a few more common font locations you may want to use. Just type them in and paste your CSS code (in curly brackets) immediately beside it like I did in the example above!

(Hint: If entered correctly, you'll immediately see the code in action on your blog's preview page below the CSS editing box.)

.date-header span will change the text of your blog post dates

.sidebar .widget h2 will change your sidebar and widget text

.comments h4 changes the text of your comments title

4. PREVIEW & SAVE!

Now your blog should show the changes you wanted to make! If it didn't work, make sure you go back through your HTML and CSS changes and meticulously read through the codes you added or changed. Most coding errors occur due to really simple things, like a missing or extra symbol such as > or /. It's frustrating, but it'll be so worth it! 


Let me know if this tutorial worked for you or if you have any questions-I'll do my best to help! 

Thanks so much for reading! If you missed parts 1-4 of my blog design series, click here to check them out, and be on the lookout for new tutorials coming soon!