Last updated on July 11th, 2019 at 08:42 am
Over the past couple years, here at Georgia Lou Studios, we’ve helped thousands of customers build, develop and customize their blogs. And during that time, one of the most common questions at our help desk system has to do with fonts. “How do I use Google Fonts in Blogger?”
Now, Blogger comes with about 150 Google fonts available by default in the Template Designer (Customizer). If your Blogger theme has font options, you can use any of these fonts.
But at current count there are nearly 900 Google fonts available. This grows on an almost daily basis. But Blogger hasn’t added any new font options since forever.
No need to despair, however, if you want to use one of the 800+ Google fonts available that aren’t included in Blogger. It’s pretty easy to use Google Fonts in Blogger. And I’m going to show you how right now.
Why Google Fonts?
Why is Google Fonts so popular?
Well, number 1, it’s FREE. Everybody likes free stuff.
The fonts are also vetted and professionally designed. Some are just drop dead gorgeous like Lato, Montserrat, Playfair Display and Amiri. There’s no need to pay 100s of dollars to use a fancy font that has pageview restrictions when there are nearly 900 free fonts.
Google fonts are also hosted. This means that you don’t have to figure out a way to upload the files to your personal server and serve them on your site online. To add the fonts to your site, all you need to do is copy and paste a single line of code into your site code. That’s it!
Of course, you’ll need to do a little CSS to add your fonts. OR you can use my super secret trick that I’m going to share with you in this tutorial. Keep reading for the EASIEST way to use Google Fonts on Blogger.
NOTE: As always, before making changes to your code, backup your template.
RELATED POST: How to Add Custom CSS to Blogger
Watch the Video to See How I Add Google Fonts to Blogger
In this video, I walk your through picking your fonts, getting your code, adding your code and applying your fonts to your Blogger.com blog. So, watch it now! (Or see the written steps below).
Step 1: Choose a Font or Fonts
- To browse all the Google Fonts available, visit the Google Fonts site.
- You will see a collection of random fonts previewed on the screen. On the right hand side you can filter by font categories, trending fonts, font weights and more. You can also search by font name if you know the name of your font.
- Type directly into the boxes in the middle of the screen to preview the fonts.
- Once you’ve found a font you like, click the little red + (plus) icon next to the font name to add the font to your collection.
- You can add as many fonts as you need to your collection (although try using 3 fonts or less to keep your site load times down).
- Once you’re done adding fonts, click on the black tab along the bottom of the screen to expand the collection tab.
- On the collection tab, click on the CUSTOMIZE link to choose your font weights. (To keep page load times fast, choose only the font weights you need. 400 is normal, 700 is standard bold. The tab will even give you a Load Time estimate.)
- Click over to EMBED to get your code.
- You have the choice of using the Standard embed method or @Import. Choose Standard.
- Copy the link code. This is what you’re going to add to your Blogger site.
- You will also want to pay attention to the Specify in CSS code down below. These are the font-family names you need for your CSS to apply the fonts to your site.
Step 2: Add the link code to your Blogger site
- Login to your Blogger Dashboard.
- Go to the Theme page.
- Click on the Edit HTML button.
- The theme code window will open.
- You’re going to want to add your Google link code right after the <head> tag which is generally right at the top of the code.
- You may even find an already existing Google link code near the top of your theme code.
- Just paste your new Google link code right after the <head> tag on a new line or on a line right after the other Google code link.
- In your link code add a / (backslash) just before the final > like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display" rel="stylesheet" />
- Click the Save theme button.
NOTE: If you get the error: The reference to entity “display” must end with the ‘;’ delimiter. You need to replace the ampersand (&) with the HTML code for ampersand, which is the following WITHOUT SPACES (see image below): & amp;
Your Google font is now installed on your Blogger site!
Now we just need to…
Step 3: Apply the Font
We’re going to search for and replace our current fonts. You can use your browser Inspect Element to find your current font-family setting in the CSS. See this tutorial to learn how to use the Inspect Element function.
- On Theme page of your Blogger dashboard, click the Edit HTML button.
- Click your cursor anywhere in the code box.
- Press [Control + F] or [Command + F] keys.
- This will open a Search box in the top right hand corner of the code window.
- Search for the name of your current font. In my example, I am looking to replace the font Lato. So I will search for that term.
- Hit then Enter Key to start searching.
- Your search term will be highlighted in yellow.
- Replace your search term with your new font family name. In my example I replace Lato with Montserrat.
- Do not disturb any of the surrounding code. Do not add spaces or other symbols.
- Continue to hit the Enter key to find more instances of the search term to replace.
- Click the Preview theme button if you want to preview your changes.
- When done, click the Save theme button to save changes.
A few notes
- You may find your fonts are controlled by Customizer Settings. These are usually at the beginning of the template and look something like this:
<Variable name="body.font" description="Body Font" type="font" default="normal normal 16px 'EB Garamond', serif" value="normal normal 16px 'EB Garamond', serif"/>
- The description gives you an idea of what the font is for. This setting is for the Body Font. This will help you if you want to customize specific elements.
- If your fonts are controlled by straight CSS rather than Customizer Settings, you may want to use the Inspect Element function in your element to identify the CSS selector controlling the font-family and then search for that selector to set your font-family.
Now You Know How to Add Google Fonts to Blogger
There you have it. An easier way to customize your Blogger site with all the amazing free fonts available from Google Fonts.