Sunday, January 6, 2013

How to Add Custom Fonts to Your Blog

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.*
 

Pin It!

57 comments:

  1. This is a WONDERFUL tutorial!!!! THANK YOU!!!! I've tried some other tutorials on this and they all confused me and I got so frustrated that I quit!!! Thanks Christi!!! :)

    Soaring Through Second

    ReplyDelete
  2. You have all of the answers, girl! Congrats on being included in the newsletter. I know you were excited!! Thanks for the cute font, too! Have a great week.

    Elizabeth
    Fun in Room 4B

    ReplyDelete
    Replies
    1. It was exciting. I found out through Facebook before seeing the newsletter itself so you know I ran to check my email. :)

      Delete
  3. Oops, I meant alphabet clip art freebie :) I'm tired...and it's early.

    Elizabeth
    Fun in Room 4B

    ReplyDelete
  4. Yay! Saw your cute alphabet in the newsletter and am so happy for you :)

    ~Stephanie
    3rd Grade Thoughts

    ReplyDelete
  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

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. 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

    ReplyDelete
  8. Wow! I have been trying to figure out how to do this forever. Thanks so much for your help! Now the hard part is choosing a font!
    Hilary
    Second Grade is Out of This World!

    ReplyDelete
  9. Thanks for the great info! I'm so glad I found your blog. It's adorable.

    Mrs. Thigpen's Kindergarten

    ReplyDelete
  10. Thanks so much for this info, Christi!
    I haven't stopped by in a while... LOVE your new blog design :)

    ✿Valerie
    All Students Can SHINE

    ReplyDelete
    Replies
    1. I'm glad the tutorial was helpful! I just updated my blog today so you're right on time. ;)

      Delete
  11. I have always wanted to know how to do this! Thank you for the video...it will make it super easy. You rock!

    ReplyDelete
  12. Replies
    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

      Delete
    2. It looks like you need to add "body" without any period to cover your comments and sidebar.

      Delete
  13. Thank you so much for posting this. I just started a blog, and I wondered how/if you could do this. This will be very helpful!
    Carolyn
    Exceptional Kinders

    ReplyDelete
  14. Wow, thanks for the awesome tutorial! I have been changing the font in the html every time I post. Your way will be a great time saver! Keep up the great job!

    Shelly
    Smiling and Shining in Second Grade

    ReplyDelete
  15. Thank you for posting this! Very easy to follow, and I'm looking forward to trying it on my new blog:)
    Dee

    ReplyDelete
  16. 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

    ReplyDelete
  17. 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

    ReplyDelete
  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!

    ReplyDelete
  19. I have always wanted to change my font but had no clue how. Than you so much for your easy tutorial!!! My blog looks so much better because of you!

    Primary Classrooms are Oceans of Fun

    ReplyDelete
  20. Thank you so much for the amazing tutorial! This has been so helpful! So if I want to add multiple fonts, I would just go into the HTML and add the first link Google font provides?

    Danielle
    Busy Little Brainiacs

    ReplyDelete
    Replies
    1. Yes, that's correct. You can add as many as you like.

      Delete
  21. Thank you so much for this post, but everything else changed besides the body of my posts where all my content is, help!!

    ReplyDelete
    Replies
    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.

      Delete
  22. 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!

    ReplyDelete
    Replies
    1. Your profile is set to private, so I can't check your actual blog's setting. It's usually:
      .tabs-inner .widget li a

      or

      .tabs-inner .PageList li a

      Delete
  23. How do you go about finding out the shortcut for an element? I tried all your options for changing the page tabs, but none of them work (.tabs-inner, .widget li a, etc)
    Thanks!

    ReplyDelete
    Replies
    1. I look for that element in the blog's HTML code and then copy/paste the tag.

      Delete
  24. 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?

    ReplyDelete
  25. 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

    ReplyDelete
  26. hello.. thanks for the info..but why mine doesnt change at all.. specially for the main post which is the post content.. do you know what is wrong?

    ReplyDelete
  27. 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...

    ReplyDelete
  28. Thank you sooo much for this!! I have been trying to figure out how to do this forever!!!

    ReplyDelete
  29. Amateur blogger here. This was really helpful and easy to follow; thanks!

    ReplyDelete
  30. Oh my gosh. THANK YOU SO MUCH. YOU ARE THE BEST EVER!

    ReplyDelete
  31. 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!

    ReplyDelete
  32. 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

    ReplyDelete
  33. 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.

    ReplyDelete
  34. 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?

    ReplyDelete
  35. Thank Youuu Soo Much Christi, But I Have A Quick Question. How Do We Use It For Our Blogger Header/Title Exactly? I Cannot Figure It Out. Thank You!

    ReplyDelete
  36. 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 ♥

    ReplyDelete
  37. 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!

    ReplyDelete
  38. 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!

    ReplyDelete
  39. What if i only want certain words in my post a different font? Is there a way to do that?

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. 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

    ReplyDelete

I really appreciate it when you take time to leave a comment. I love hearing from you!