How to Add Custom Fonts to Your Blog

ByChristi Fultz

I have an alphabet clip art freebie in the TeachersPayTeachers newsletter today (yay!), which seemed fitting because I’m talking about fonts over here on the blog today too. =)   

I wanted to do a quick blogging tutorial today to show you how to customize your blog‘s fonts. I’ve been getting lots of questions about it, so I thought the easiest way to show you was to make a quick video. It will show you how to add more fonts to your blog than the ones that are available through the Blogger template options. It’s really easy too, promise!





It takes a little bit of extra time, but as you can see it’s not too hard. If you had trouble viewing the video here on my blog, you can watch it directly on You Tube. I hope it helps! 

As promised in the video, here are some of the Blogger shortcuts you’ll need to add the custom font to specific parts of your page:

body or .post or .body-post will do the main text of your page
h3. post-title will do each blog post title
.date-header span will do your dates
.sidebar .widget h2 will do your sidebars and widgets
.comments h4 will do your comments title  

Don’t forget that you can get more help with your blog through my sister site, Design by Christi, if you need it. I love working together to make your blog match your vision!

*This post was retroactively added to my new series, Work Your Blog Wednesday.*
 





63 Comments

  5. Thank you for your helpful video! I just did a major shout out to you on my blog today because everyday I've been learning something new about blogging and adding a unique font has made my day!

    Thanks so much for sharing!

    Amy
    Turtley Loving Teaching

  6. Opps- sorry for the last commnet 🙂 Thanks so much for posting this!! I am such a visual learner and I think I might actually try this! So helpful!
    Tori

    1. The sidebar and comments code are not working for me. Is it .sidebar .widget h2 with spaces between each and the .comments h4 with a space between comments and h4?

      Thanks so MUCH

  15. I want to change the font of my page tabs? I think thats what they're called. Could you tell me the code for this or is it one of the ones up there? x

  16. Hi thank you so much for this tutorial. I've been looking everywhere and yours was the most helpful. I may have missed it in the post but how do you change the tabs font? I've added my Google font to everything else but I can't seem to find a code for that.

    Thanks so much for your help. Have a great day xxx

  18. I really appreciate your video – thanks so much! I had been searching for something nice and CLEAR so that my foggy-mom brain could grasp it and you nailed it! 🙂 God bless!

    1. The body on your specific blog will be .post-body

      Be sure you aren't selecting a font in your compose box where you write your blog posts. You'll want to select "default" instead. If you pick one from the drop down when you write each post, it will over ride the code.

  23. Hi Christi!

    Quick question, what about changing the font to the tabs text/menu fonts i.e.: Freebies, Seasonal, Reading etc? So far so good on changing h1, & post but no luck on tabs ;( Thank you!

  25. I have been searching and viewing tutorials for hours until I found yours and thank goodness! It was extremely helpful! I do need some advice. I added my custom CSS for my font, but it didn't change in the body of the post. It changed the the other main text of the page (posting author, date, and time), but not the text in the post. I'm not sure what I'm doing wrong. Can you help?

  26. so glad i found this!!!! thanks for sharing you saved me hours of hair pulling as this contained everything i needed.. my new blog design is well on the way now!!

    Jen

  28. yup..sorry for the late update.. for those who cannot change the body text.. the key is when you write your post.. make sure that your use "DEFAULT FONT" instead of other font.. orelse you will end up like me… spending few hours just to figure out how to change it…

  32. Thank you for the tutorial! I have a question. I added the font and did everything but what do I type as the command for changing the page tabs font? I'm asking what to type before the {font-family: 'Sail', cursive;} Thank you so much!

  34. Thank you SO much for this tutorial! You are the only person who has been able to help me get google web fonts to work on my blogspot! For some reason, the tabs/pages and post title wont take to the new font, do you happen to have any suggestions?
    -Annie

  35. I give up. It won't work on my blog. I even tried it on one of my other blogs and it worked. I suppose it has something to do with my pre-made design…IDK. I have been trying for two days and I am frustrated. This tutorial was fantastic though.

  36. Hi Christi!Your tutorial was amazing! However when I enter the CSS code, the font shows up. But when I view my blog, some random font appears that isn't the one I chose. Help?

  38. You are AWESOME. This worked so well…I've been looking all over the internet for it, and, viola! You came along and helped me out BIG time.
    Tane ♥

  39. This will not work for me and I'm not really sure why? I put the long code under the head and did the backslash, went to add css and put .h3 post-title {my font} and nothing, am I doing something wrong? I put the backslash right before the end bracket as well, do you have any ideas? Thanks so much!

  40. Thanks so much for your tutorial! The video makes it easy to go through the steps.
    I do have a question (or two). Can you tell me the Blogger CSS shortcut for adding customized fonts to a Page title (Home, Contact, etc.)? I didn't see that one noted in your list above.
    Also, do you know of a site where I can find a complete list of these shortcuts? I've searched Google until my eyes have crossed (LOL) and have come up with only partial information.

    Thanks again for your great instructions, and thanks in advance for any help you can offer!

  42. hey thank you so much for this but the main title won't work for me 🙁
    I had another question if that is oke, how do you make tablads and how do you make your date of the day so differt, i can't quite figure it out!!

    xx Esmay

  43. Thank you for making this so easy! I tried once before with different directions, and it got so complicated that I gave up.

  46. This is a GREAT tutorial! I had my blog set up by someone else and am wanting to tweak it and will apply the principles from this video (actually I already changed the post body text) but I am wondering how you change the size and most importantly how you tell it what color you want the text to be. For example – the titles are a pretty blue that matches my blog color perfectly and the date is a pretty green that matches my blog as well. I want to change the font but am not sure if that will change the color too – I want to keep colors the same but change font. Thanks for any help!

Comments are closed.