How to Install Fancy Fonts for Free

Have you ever wanted to use a fancy font on your site? I use a paid-for service called TypeKit for some of my site’s fonts, but you can use other fonts for free with Google Web Fonts as well.

Following are two tutorials. I want to say at the get-go that the way you put in the code will be different for different themes, but I thought these would cover most of you (hopefully). Just be very careful when editing your code.

Backup first!

Before you make any changes to your theme, I highly recommend you backup your files. You can read How to Backup Your WordPress Blog if you’d like.

Another tip

I wouldn’t go crazy with the fancy fonts. I’d keep the main content in a familiar font and accent with a fancy font here and there. Just my two cents.

OK, here we go. You can do this!!

How to install fancy fonts in Genesis

Oh how I love Genesis and highly recommend using it as your theme. In this video tutorial I’m using the Prose child theme which is a good basic theme with a few extra user-friendly features the other Genesis child themes don’t have. (Here are some other posts about Genesis and why I like it.)

Can’t see the video? Watch it here.

Video Notes for Genesis:

  1. Go to Google Web Fonts and pick a font. Click the blue “Add to Collection” button on the right.
  2. At the bottom of your screen, click “Use” in the blue bar.
  3. In Step 1, check the box next to the font you want to use (if it’s not already selected). Make sure it doesn’t impact your page load time too much. If it does, I’d choose another font.
  4. In Step 2, leave the default as is.
  5. In Step 3, copy the snippet of HTML from the box. This needs to be pasted as the first element in the <head> of your HTML. Go to Dashboard –> Genesis –> Theme Settings –> Paste the snippet as the first line in the first “Header and Footer Scripts” box. Save.
  6. Figure out the element name that you want to be fancy. In this case, we are working with #content h1, #content h2, etc. (Here’s the tutorial that lets you see behind the scenes if Google Chrome. If you use Firefox, you can do the same thing using Firebug.)
  7. In Step 4, you’ll need to grab the CSS from Google Web Fonts. Copy it and paste it into your style.css (Stylesheet) underneath the element you are modifying. Don’t forget to include the brackets as well. (If you’re using Prose, you can also paste this in custom.css located in the right column.) Save.
  8. Refresh your page and you should see your new font!

How to install fancy fonts in TwentyEleven

In this tutorial I used the very basic default WordPress theme, Twenty Eleven, as my example. However, if you’re using Genesis like me, I’ve added an addendum at the end of the video that applies to you.

Can’t see the video? Watch it here.

Video Notes for TwentyEleven:

  1. Follow Steps 1-4 in the Video Notes above.
  2. In Step 3, copy the snippet of HTML from the box. This needs to be pasted as the first element in the <head> of your HTML. In TwentyEleven, go to Dashboard –> Appearance –> Editor –> Find your header.php file in the right column. Locate the <head> tag and paste the snippet immediately following it. Save.
  3. Next you’ll need to figure out the name of the element you want to be fancy. See #6 above.
  4. In Step 4, you’ll need to grab the CSS from Google Web Fonts. Copy it and paste it into your stylesheet (style.css). Paste it under the name of the element you want to attribute the font to. In this case it is .entry-title. Save.
  5. Refresh your page and you should see your new font!

Having trouble?

If you’re having trouble and can’t seem to get it to work, make sure you’re using the correct element name in CSS. Go over Step 6 in the first set of Video Notes for Genesis above. And then make sure you are using the proper structure in your stylesheet. Refer to the elements already in your stylesheet to make sure you are doing so. Don’t forget the opening and closing brackets and in between those brackets, each line needs a semicolon at the end of the line.

Disclosure: The post contains my referral links.

Do you get The Useletter?

It’s a hand-curated roundup of tips I don’t share elsewhere. And peeks behind the scenes. Not sure? Learn more (& see what others think)...

Comments

  1. says

    BRAVO!! Amy – I’m converting over to WordPress and have watched videos and read countless blog posts on how to get Google Fonts into my site. Yours was by far the easiest and most consistent way to do it. I was able to remove a resource hogging plugin after following your guide. THANK YOU.

  2. says

    Hi Amy! I know this was written awhile ago, but wondered how you use a different font that’s not from google web fonts? What if I got one off dafont.com that I was planning to use? Is there anyway to make that happen in wordpress? I wish there was just a font button on the toolbar…

    Thanks!!!
    Jamie

  3. says

    I want to shout from the roof tops!!! Thank YOU! I’m in the middle of switching from blogger to WP and the learning curve is a bit steep but I’m getting there. I ready a ton of tutorials on how to do this and either didn’t attempt for fear I’d mess everything up or they didn’t work. I knew there had to be a simple way. Hooray!

  4. says

    Hey there,

    I can’t seem to get this to work for me using Genesis w/News child theme. I inspect element, find the description but when I go to search in the editor no results come back. I’m stumped. I too am only looking to change my post titles and headings.

    Any ideas what I’m missing?

    • says

      Hey Danielle,

      Sorry it’s giving you trouble. Have you asked in the support forum? I generally get great help there (especially in the Design Tips & Tricks area).

  5. says

    Hi Amy,
    I’m very very new to this CSS thing and I’m having some trouble following your instructions. I’m with you until step 6, but then I’m totally lost. I don’t know what code to put where — and the Google fonts page only says to “Add the font name to your CSS styles just as you’d do normally with any other font” (which is fine, except I don’t normally do anything with any fonts!)
    I want to change the font to Amatic SC throughout my page, but everything I’ve done to try to achieve this yields no changes. I’m looking for something I can copy/paste right into my style sheet that is simple and won’t require my knowing the ins and outs of code. My mind is kind of spinning right now!
    Thank you,
    Emily K.

    • says

      And, by the way, I’m using Genesis + Prose theme! Or… trying to. I picked these because they are supposed to be “user friendly, but I literally have no idea what I’m doing…

  6. says

    Hi Amy,
    I just can’t seem to get this to work. I have the twenty eleven theme and I followed your tutorial for the child theme. I am inputting all the codes just like you say (for my main header) and it does not change. I have been working on this for hours and still no luck. Any idea what I’m doing wrong?

    • says

      Guess what? It worked! I don’t know why it wasn’t showing up even after refreshing. Logged in this morning and viola` it was there. Thanks Amy. Another great tutorial.

  7. says

    Hi Amy,
    Trying to customize my fonts. I’m good until I try to locate the H1, H2….I don’t have Chrome, rather Safari. And then, I go into editor and it says do not change these settings… I have an “edit CSS” tap under appearance. But I put something there and now can’t delete it! Ugh.

    Help.

    Thank you.
    Robin

  8. Ann says

    Hi Amy! Your tutorials have been such a great help to me as I customize my new WordPress blog. Honestly, I don’t know if I could do it without you! I have just changed my header font as per your instructions above. It looks great, but only shows up when I am logged into the blog. If I view my blog as anyone else would, not logged in, the font is the same as it originally was. Any thoughts on why this is and what I can do about it? Thanks!

    • Amy says

      Yes, Misty. TwentyEleven is not a custom theme but just the default theme for WordPress. Make sure your code is inserted in the right place and you should be good to go!

      • says

        So are you saying we CAN change the font in the twentyeleven theme? I can’t seem to figure out where. I watched the video, but I don’t have Genesis on my sidebar as an option to choose from.