How Do I Use a Custom Font for My Blog Post Titles?

Today’s question comes from Jill over at The Prairie Homestead:

I’d love to know how to make headers for my blog posts using custom fonts. How do I do that?

As you can see, I have a custom font for my blog titles here. It adds an extra touch of branding, which I love.

I’ll give you two ways to do this: one’s easy and one’s hard. The reason I’m even bothering with telling you the hard way is that it’s the only one I’ve actually tried.

The Hard Way

If you wanna try the painful way (the way I did), you have to mess with your CSS file. Here’s the tutorial I used. It’s a video and fairly easy to follow. It’s for the Thesis theme but the process is the same for other WordPress themes. Just know where you put the files on your service and put the code listed into your .css file (disregard when they talk about open hook). I would type out a tutorial but I have to give credit where credit is due. Plus, a video is much better anyway, right?

To get the correct font formats so they’re able to be read on the web, you can do it one of two ways. If you don’t have a particular font in mind, you can use FontSquirrel, pick out a font then download the @fontface file. If you have a certain font in mind (like mine above), you’ll need to upload it to the @fontface kit generator. Either way, you’ll end up with a kit of font files that you can then upload to your server like she did in the video linked above. Then just follow the rest of the steps in the video.

WHEW! How about an easier way?

The Easy Way

Enter Typekit. I haven’t used Typekit personally (but I’ve heard great things about them). It works with WordPress and as long as you have under 25,000 impressions a month (most of us do, right?), it’s free. You can’t use any font you want but they have a lot to chose from. I watched a video tutorial from here that walks you through the process. Looks pretty nifty and I might try it for Adventuroo!

Seriously, I’d try to the easy way with Typekit… they even say it’s the easiest. :-)

For you Blogger folks, this seems like a easy-to-follow tutorial. I’d love to hear how it works.

Every Thursday, I answer one of your burning blogging questions. Want to know if there’s a plug-in to do xyz? Stumped on a grammar question? Curious what a certain piece of Twitter lingo is? Let me know! If the question needs too much detail, I’ll turn it into a full Momcomm Monday post.

Share this gem!Pin on Pinterest1Tweet about this on Twitter0Share on LinkedIn0Share on StumbleUpon0Share on Facebook0Buffer this page


  1. says

    So I played with Typekit this afternoon and got it to work! Took me a while to figure out where to put the code, since I’m running Atahualpa. But after that it was pretty easy.
    I still might try the “hard” way, as Typekit only as certain fonts, and I’d really like my headlines to match the font in my header. Thanks again!!

    • melissa says

      So awesome! I’m glad that worked! If you decide to try the hard way, be sure to copy all your CSS code somewhere in case you need to revert back to it and don’t remember what you changed!

    • says

      Jill, I just installed my blog into WP with the atahualpa theme. This was the first major tweak I attempted and I completely botched it… took my entire blog down and I couldn’t even get into my dashboard to change it back. No access!!! I only inserted one line and knew exactly what to delete but COULDN’T GET IN to undo what I’d done. Talk about freak out!!! I was able to access the CSS through godaddy, thank God. Once I finally figured out how to access that way I deleted the line of code and everything was restored. Then I found a thread on the atahualpa theme forum and followed those directions… think I figured out where to put the code (and my blog hasn’t crashed, so that’s a good sign:) but it’s still not working. I just want to change the header so put in H1 in the selectors thing in the typekit editor thing and published it… but nothing ever changed on my blog. Do I need to switch something in the theme options in my back end too? I’d kind-of like to try the “hard way” since I want to use a font that wasn’t available in typekit, but now I’m more paranoid than ever that I will completely screw things up. I’ve lost my adventurous confidence when it comes to my blog tweaking! ha! So for now I want to stick with the easy way. :) Can you tell what I’m missing from the typekit installation through my description here?? Thanks in advance for your help if you’re able. :)

    • says

      All right, I did it. It took about an hour, mostly because I wasn’t sure how to change my CSS. But I did it. I like the Title of my post in cursive, but I don’t know if I like my other font. I guess I will have to play with it a bit more.

      • melissa says

        I really love the cursive font! Looks great! Have fun playing with the other one– sometimes it takes a while to find a font you like!

    • melissa says

      I copied my code elsewhere… that way if I screwed up, I knew I could revert back to it! Don’t be scurrrred. LOL

      • melissa says

        Oh good! Like I said, I want to try Typekit on Adventuroo when I get the chance! My main Adventuroo font isn’t a good fit for headlines so I’m sure I can find something fun in Typekit!

        • says

          The only thing to note is that sometimes it takes 15+ minutes for the changes to take effect on my site. They do indicate “a few minutes”, but I wasn’t really expecting a quarter of an hour. :)

  2. says

    yay! my blog is now switched over to WP and i’m a happy camper! (although it’s still looking kind of ugly and i’m not “proud” of it quite yet!) now to pimp it out a little. i’m going to try this next. thanks for the tip!!

    also, can i ask you a question? i’d like to set up with one main post on my page and then snippets of recent posts below, similar to what you have. is that a standard option in WP or a plug in you’ve used? or just a part of your thesis?

    • melissa says

      Hi Adriel! It’s a Thesis thing. I use select it to do “teasers” and it does it. I’d first google your theme name plus “how to add a teaser” or just “teaser” and see what comes up. It may be a setting in your theme options. If that doesn’t work, try googling “teaser wordpress plugin” and see if anything comes up. Hopefully it’ll be an easy fix that won’t lead to the drama you had with adding a custom font! BTW, is that worked out now?

    • melissa says

      Hehe. Hmmm, sorry it didn’t work! If you have a designer you work with, maybe let them have a look. I can only follow directions with coding– I’m no good at figuring out why stuff doesn’t work!

  3. Cathy Montoya says

    It’s a Thesis thing. or just a part of your thesis? Looks great! But after that it was pretty easy.

  4. says

    Hey Mel, I installed my font the other day using the hard way you did from the video tutorial. It looks great on my Mac at home on Safari and Firefox, but when I got into work and used IE, it didn’t work. It defaults back to Arial. May I ask how you got around the IE error?

  5. says

    Hi! Thanks so much for the tutorial! I’m really struggling though to get the fonts to show up on my blog!
    I’ve tried your easy way, but I have no idea how to actually get the two fonts I’m allowed to show up on the theme? I can’t figure it out at all. :(

    Also a small heads up is that the video you are linking to in the ‘hard tutorial’ is no longer working, the page is blank. :)