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:
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.*
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
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
It was exciting. I found out through Facebook before seeing the newsletter itself so you know I ran to check my email. 🙂
Oops, I meant alphabet clip art freebie 🙂 I'm tired…and it's early.
Elizabeth
Fun in Room 4B
Yay! Saw your cute alphabet in the newsletter and am so happy for you 🙂
~Stephanie
3rd Grade Thoughts
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
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
You can do it!
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!
Have fun with it! =)
Thanks for the great info! I'm so glad I found your blog. It's adorable.
Mrs. Thigpen's Kindergarten
Thanks for stopping in!
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
I'm glad the tutorial was helpful! I just updated my blog today so you're right on time. 😉
I have always wanted to know how to do this! Thank you for the video…it will make it super easy. You rock!
Thank you so much!
Jenna
Just Diving In
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
It looks like you need to add "body" without any period to cover your comments and sidebar.
Hey Christi! Great post.
Whats the code for the navbar?
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
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
Thank you for posting this! Very easy to follow, and I'm looking forward to trying it on my new blog:)
Dee
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
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
Very good article and very understood please support me in my article Konsumen Cerdas Paham Perlindungan Konsumen about Konsumen Cerdas Paham Perlindungan Konsumen and visit Sekolah Belajar Forex FBS Indonesia Thanks and nice share
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!
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
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
Yes, that's correct. You can add as many as you like.
Thank you so much for this post, but everything else changed besides the body of my posts where all my content is, help!!
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.
You are seriously amazing!
LOL, thanks!
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!
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
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!
I look for that element in the blog's HTML code and then copy/paste the tag.
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?
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
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?
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…
Thank you sooo much for this!! I have been trying to figure out how to do this forever!!!
Amateur blogger here. This was really helpful and easy to follow; thanks!
Oh my gosh. THANK YOU SO MUCH. YOU ARE THE BEST EVER!
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!
Try
.tabs-inner .widget li a
thank you so much for the tutorial 🙂
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
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.
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?
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!
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 ♥
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!
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!
What if i only want certain words in my post a different font? Is there a way to do that?
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
Thank you for making this so easy! I tried once before with different directions, and it got so complicated that I gave up.
Hey does anyone know the shortcut to change the font of the blog title?!? thanks!
Please give us the shortcut code for the blog title. It would make my day!
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!
You have no idea how long I've been searching! Other blogs just did not explain it as well as you did! Thank you so much!!
it worked when i paste the css code but when you view it, wont work the font that i want. any suggestion guys?
WOW! Thanks so much it worked great! Just one question how do I get this to the title of my blog?