Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



How To Use Custom Fonts in Blogger or WordPress

The idea of adding custom fonts to your blog has definitely come a long way over the years. Back when I started creating websites, you could pretty much only use standard computer fonts like Arial, Verdana, or Times New Roman. The font had to be one that was available (by default) on every computer. If you were to add a font to your CSS/HTML that you had installed to your own computer, only the visitors with that same font installed would be able to see it properly. You can imagine this made for some messy looking websites! Unfortunately, some people still try to add fonts this way, not realizing their errors.

Javascript codes were then created to allow you to use whatever font you wanted, whether it was pre-installed on your visitor’s computer or not. This method was tricky and required more work than it was worth.

Today, we have Web Fonts, which make it incredibly easy to use not-so-basic fonts throughout your site. If you’re not familiar with Google Web Fonts, this post will show you exactly what they are and how to use them.

First, why web fonts? Let’s say you want to add a fancier font or a script font to your blog. Web fonts make that possible without having to have the font installed on your actual computer. Instead, the font is accessed through a script, where it is stored on the Google servers… so anybody can see it!

It’s easier than ever to install web fonts on your site. First, you need to choose a font you like from the Google Fonts site. This can take some time, but luckily you can filter your options if you wish. You can even change the default sample text to whatever you like so you can see exactly what your text will look like with each font.

How To Add Custom Fonts To Your Blog

Once you find one you like, click on the Quick Use icon:

Using Google Web Fonts

On the next page, scroll down and grab the “Standard” code:

How To Use Web FontsHighlight the text and copy it to your clipboard (CTRL/CMD + C). If you’re using WordPress, simple paste this into the <head> of your HTML template. For Genesis, go to Genesis > Theme Settings and insert it into the first Header and Footer scripts section.

In Blogger, you’ll want to go to Template > Edit HTML and paste it just under the <head> code. In Blogger, however, you need to add a trailing slash / to the end of the URL, right before the ending bracket, like so:

Next, you can add the font to your stylesheet (CSS) wherever you like.

Custom Web Fonts

Copy the CSS code shown on the font page and either replace existing font-family elements with your new font, or create new elements. It helps to know which IDs are applied to the different elements of your blog. Here are some examples for Blogger that you can add to the CSS portion of the Template Editor:

Remember to replace the font-family bit with your own generated font-family code!!

Change your post title font

Change your blog header font

Change yourย  post body font

Change your date font

Change your post footer font

Change your previous/next link font

Change your sidebar title font

Save your work and your new custom font will be applied!

You can also add multiple web fonts to your site. You can either just generate another “Standard” link code from Google Fonts, or you can combine them by selecting the Add To Collection button instead of the Quick Use button:

Using Multiple Google Fonts

They will be added to a window on the bottom of the screen, and selecting “Use” will generate a single “Standard” link code for all of them, as well as a CSS style for each.

I hope this helped you. Be sure to check out my HTML/CSS lessons to learn even more about codes.


  • Beks

    I have a blogger blog, and tried to change the font, by placing it under the , but nothing happened, and I couldn’t find it. What happened?

    • Rabid Raghav Pandit

      For HTML help click here-http://www.htmlhour.com/html-tags/a-tag-2/

  • thank you! I’ve been looking up how to do this for weeks, but you’re the first one who has explained how to put this into CSS [which seems easier than digging through all the html] and the descriptions of what each code bit changes in blogger is SO helpful! I am curious though if the “gadget title” in Blogger is the same element as the “sidebar title” because I’ve been having trouble getting that one to change.

    • I do believe the “gadget” title is the same. The sidebar title selector is: .sidebar h2. You can apply this in the Template Editor CSS section to see it change in real-time (after adding the link href code to your HTML section)

  • that one gets a little trickier. I believe it’s:
    .tabs-inner .widget li a, .tabs-inner .widget li.selected a
    followed by your curly bracket style.

  • Diana Bauer

    Its not working on my blog. the code you have here does. But the fonts I put in don’t change ๐Ÿ™

  • Hmm not really. You would need to use a web font that is licensed for that kind of use. That’s why Google Web Fonts comes in ๐Ÿ˜‰ You can probably find a similar or matching one there.

    • Awh that’s a shame! ๐Ÿ™ I suppose I need to go back to the drawing board and find another font that has a similar feel! Thanks for the reply Dana ๐Ÿ˜€

  • Do you have a good code for changing the pages navigation bar at the top? I can’t seem to find much info on this anywhere. Thanks!

  • Hi Dana, quick question. I’m looking for a unique font JUST to use in my header/banner art. As far as consistent blog design, that wouldn’t count as one of the fonts I’m limiting my blog to, would it? I was going to use a header font, then the body font (josefin sans), blog title (either josefin sans italic/bold or slab) and the date (slab or a small script.) Menu & widget titles I wanted to use whatever I do my header in. I just need to find a tribal/readable font. But anyway, on my phone your pink title font comes up very nice but on my recently revived netbook, its comic sans. Is my computer just so out of date its not recognizing googles fonts? Thanks! -Eve

  • James

    How does one go about changing the font to a google font for just one specific post on blogger?

  • Hi Dana, after several attempts to add the css code to the template editor … it is still not changing the font on my profile… is there anything that I have missed?

    • which font are you trying to change??

  • Hello!!Great article!
    I tried to use it in my blog,but when i add the code in the HTML,it says “The reference to entity “subset” must end with the ‘;’ delimiter.”.What should i do?

    • Have you made sure you’re added the slash to the end of this line:
      rel=โ€™stylesheetโ€™ type=โ€™text/cssโ€™/>
      (before the >)

      • YES!absolutely sure!!!
        I think i didn’t do well the CSS part!!I am going to check your other post…because i have no idea about CSS!pff

  • This is amazing! What would be the css code for changing the nav bar font or tabs text?

    Thanks!

  • Cara

    Hi Dana. I have done everything correctly as you’ve said above so far BUT I’ve got a bit stuck on the ‘Add CSS’ step. I’ve entered my font code and it did not make any changes to my blog font. I then tried changing it to the ‘header code’ (as you suggested above) and that has not worked either. I am using the Lora font. Any ideas on what’s wrong? Cheers.

  • Lauren Sowerby

    THANK YOU!!! x

  • Hi Danna, Thank you so much for sharing this good method, I have one question, if I need different CSS code for different customise, can I just list each part of CSS code one after another? xxx

  • Thank you for sharing this!

  • Sajid Ali

    well done you done great jobs i have successfully change the my Blogger http://www.itechdunya.blogspot.com fonts but i have one issue one i give colors to post text it does not show proper kindly suggest me.. thanks

  • Tilak

    How to change blog title font not post title font?

    • I believe it’s #header h1
      for the class

      • Tilak

        Thank You ๐Ÿ™‚

  • Sammy Nguyen

    Thank you so much!

  • For me it doesn’t work? I’ve been on lots of different tutorials and tried them all and can’t seem to get it to work…And I have no idea why

    http://blackberryandbee.blogspot.co.uk/

    • I see it’s worked for you as your latest post is a post sharing how to use Google Web Fonts ๐Ÿ˜‰

      • Yes, I tried it a couple more times and it worked!

  • Rachel

    the post title ccs isnt working for me on the homepage. However, it does work after i click on the post title? Help!?

    • try:
      h3.post-title a, h3.post-title, h3.entry-title

  • camryn

    I was wondering what the css code to make the defalt pages list was and the css for the rest of the text on the sidebar would be.

  • I dont know how Ive managed to make this not work but it just will not work on my blog. I’ve added the code in the correct space and into my CSS and no matter how many time I redo it I’m stuck with my same boring font? Am I missing something or could it have something to do with the theme I purchased? Any help would me wonderful!

  • Hi Dana, I tried using the vidaloka web font, but the bottom of some letters look cut off and some look like a white streak is going through it??? I’ve tried adjusting the line height and size

  • Morgan Hatch

    Hi Dana,

    I am trying to enter the CSS portion into the coding but don’t know where to add it in the coding bar? Do I add it under the code?

  • Rita

    OmG you saved my life!
    Thank you ๐Ÿ™‚

  • Luna Dumpling

    Hello Dana, I used this and it worked! But i don’t know how to change the fonts of the posts themselves. Do we change it by the template? Or is there a way to ad the font as an option when we’re actually typing it out? (e.g when we are typing the post, we highlight everything, click on the fonts and choose an option) Thank you! <3

  • Dear Dana,
    I can’t seem to change the font of my widget title using your code. It worked on the date and post title, but the sidebar titles didn’t change at all. It only changed using the default feature; using fonts which have already supplied by Blogger (Advanced > Gadget > Title Font).

    My blog is trialnindy.blogspot.com.

    Thanks in advance ๐Ÿ™‚

  • Mulatto Dre

    Thank you so much! Everything worked perfectly! This is a great blog post and I appreciate it!!!

  • Rahul

    I was going to use a header font, then the body font, blog title and the date menu & widget titles in HTML tags I wanted to use whatever I do my header in.

  • How would one change the font for their post titles on mobile? I’m a bit stuck on this bit

  • Denise

    Thanks for this! It worked and helped me so much! Would you be able to help me out with the gadget/sidebar body text in blogger? What’s the ID for doing this? Thank-you <3

  • Hey, Dana! How can I make my blog title bigger? I’ve gotten the font but you never explained how to make it bigger. I tried doing it on Template>Design but it won’t work. Please help!

  • I just want to make the style of a short disclaimer at the top of my blog posts on blogger. How can I do that? I know how to get it there – I don’t know how to use a custom font in in that blog post editor in the settings… Does that make sense? That is all I need at the moment. thanks ๐Ÿ™‚

  • Hi Dana, I’ve been playing with this for hours now and still no luck. I can change my post title font in the advanced settings and can apply it to my blog but when I view my blog it’s reverted to the default ๐Ÿ™ any ideas?

    http://justneeks.blogspot.co.uk/

    • Have you added the style code to the instance of the font you want to change? for example for the post title, try adding this to your CSS:

      h3.post-title {
      font-family: ‘Tenor Sans’;
      }

  • Mayank

    please download my app from google play store

    https://play.google.com/store/apps/details?id=com.font.colors

    Salient features of the app

    1.Customise the text,font color and background color for display

    2.You can write your own text and select its size,color and the background color in which the text will be displayed

    3.Take the screenshot of the text.

    4.Save the screenshot in the gallery.

    5.You can crop the screenshot saved or any other image from gallery and share the cropped image with your friends.

    6.You can write birthday/festival/best wishes greetings text,select the wackier font and color

    7.Convert the text into cropped image and share it with your friends.

  • Bunny

    Dana!!!! i cant do this!..probably because ive been coding to reconstruct my blog for days without sleep…right now im finding it hard to understand what to do..1. im using blogger..and i cant even find the tag in my edit html…2.Im trying to change my blog title font..3.Please help!!

    • Eric

      hit “control + f” if you are using a window’s machine. and then type . this “find” function allows you find things alot quicker ๐Ÿ™‚

  • Nurin Isidro

    hi dana, id like to ask what theme are you using with this site ๐Ÿ™‚ thanks

Navigate