Using Different Google Fonts for Headings

Hello, Ashley!

I’m wondering if you could give us a tutorial in how to add different Google Fonts to the headings for our posts. I mean a different font for Heading 1, Heading 2, Heading 3, etc. 😀 Thank you!


Hi Anna! 🙂

First you have to include each Google font you want to use in your site. So if you create your Google fonts collection and click “Use” it will tell you to add code like this to your website:

<link href='|Gabriela' rel='stylesheet' type='text/css'>

This code needs to go in the <head> section of your site.

Next, it’s a matter of CSS! Each heading looks like this in CSS: h followed by a number. So Heading 1 looks like this: h1. We’re going to target each heading in CSS and apply a different typeface using the name. Here’s an example:

h1 {
	font-family: 'Allura', cursive;
h2 {
	font-family: 'Gabriela', serif;
h3 {
	font-family: 'Open Sans', sans-serif;

You can continue to do this for all the headings you want! If for some reason it’s not working, try adding !important at the end, like this:

font-family: 'Allura', cursive !important;

This ensures that our CSS takes priority over any other pre-existing CSS rules.

So now that you have your CSS, you need to add it into your theme! Most themes will have a spot to enter “Custom CSS”. If not, Jetpack comes with a custom CSS feature.

After adding in the CSS, save it, and check out one of your headings!

How many different fonts do you use on your blog?

I use three!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these


    1. You have to use the web inspector tool with your browser. If you right click on a piece of text, your browser may have an option to “Inspect Element”. If you do that, it will bring up a panel with the associated CSS rules and you have to find the font-family one.

      Here’s an example from inspecting my own blog:

  1. Thank you so much. That’s a little bit above my head with my current knowledge but it will be great for me once I do know more. I know I used a Google font using your Tweak Me Theme which seemed to just make my job so much easier. Just clicked a button and added it. Yay for good themes 🙂

    Jamie Pinson recently posted: The Magic of Reading: A Nostalgic Moment.
  2. Ooh I remember reading a tutorial on this a while ago on a random site when I was trying to work around with my blog design and stuff, and it’s so annoying because with the new (well, old now but relatively new) Blogger HTML setting, it was so difficult to find a tutorial that applied to that setting and worked. But I love adding new fonts it’s so fun!

    I use three, too, not including the fonts I have on my graphics. I feel like three is just super easy to manage and anymore would get slightly busy. Thanks for sharing, Ashley! <33

    Eileen @ Singing and Reading in the Rain recently posted: Eleanor & Park by Rainbow Rowell
  3. So helpful! I’m useless these days at most types of coding, which is super frustrating because I used to be very fluent. It’s like relearning a language, and with your help, I should get there! 🙂

    Michelle recently posted: The Weekly Word: Swart
  4. Thanks so much for this! I got it to work with the first heading, or front, but the second one isn’t showing up, do I have to revert the font changes I had made in the template? It’s sticking with the fonts I chose for the page text and page headers…the only thing that changed was the widget and dates.

    1. Can you paste me exactly what CSS you put in? Then can you point out the bit of text on your blog that you’re trying to change with that CSS?

        1. Can you show me where it’s not working? Like have you added an h1 tag somewhere that isn’t picking up that font?

          1. This is probably a stupid question. But do you mean I have to tag it in the post or something? What I’ve been doing is just selecting “heading” and the h2 shows up..
            How do I tag it for a selected text? I tried selecting subheading, minor heading, none of them are altered except heading which changes to the h2.

            1. Sorry but I don’t know what “heading”, “subheading” and “minor heading” correspond to. Those are labels Blogger has just made up.

              If you want to use h1, you switch the HTML editor and do it like this:

              <h1>My heading here</h1>
              1. THANK YOU. I will try that! I figured it was something like that, I was just confused Bc blogger was doing it automatically for h2 with the widgets and dates. 🙂
                Thanks Ashley! You’re awesome 4 helping clueless bloggers like myself haha

Recent Posts

    Random Posts