How to add Google web fonts to your Blogger blog

In four easy steps!

  • 1. Pick your font.

Go to Google Web Fonts and add the font you like to your collection.

In this example we’re going to pick Fredericka the Great font. After you added it to your font family collection you’ll click on the button “Use”.

  • 2. Get the code.

Now we’ll need to 2 sets of code to add to our Blogger blog’s HTML & CSS.

  • 3. Embed the font family.

Copy the first box of code and paste it after the <head> section in your HTML. See below, right after the <head> section I pasted the new font family code.

And here’s the part that’s not documented on Google Web Fonts site, that I’m going to tell you because I don’t want to you go crazy like I did… you must insert a “/” backwards slash at the end of the code. The code you copy from their site will not have the “/” you need to add that yourself right after the type=’text/css’ before the ending “>”.

  • 4. Integrate the fonts into your blog.

Copy the code in the second box and place it in your template where ever you want the new font to be.

Let’s say you wanted to change the font of the post titles. Search your HTML for the code that defines your post titles, it may look something like this:

.post h3 {
font-family: ‘Fredericka the Great’, cursive;

}

If you want to add it to the sidebar titles, too, look for that code:

h2 {
font-family: ‘Fredericka the Great’, cursive;

}

Replace the code for the original font-family with your new font-family.

If you want to change the size, color & weight (bold, not bold) you may also add these to the same section.

h2 {
font-family: ‘Fredericka the Great’, cursive;
font-size: 21px;
color: #333737;
font-weight:normal;
}

{Title fonts can be coded <h1> to <h6>, these tags are used to define HTML headings and can be different depending on which Blogger template you are using. Look around in your code, you’ll usually be able to tell which is which by the grouping/heading they are under. When in doubt change a setting and use preview to check it – if it isn’t right go back to your code, click clear edits and try again.}

  • Examples

In the blog below we changed the Post Titles and the Sidebar Titles to Fredericka the Great font.

In the blog below we changed the Post Title & Sidebar Title font to IM Fell French Canon SC in grey & red velvet, and we used Parisienne font in gold in an HTML widget to define the blog’s links in the upper left sidebar.

The HTML widget code will look something like this – with a span code to determine the font used:

<span style=”line-height:110%;font-family:Parisienne;font-size:37px;”>
<a href=”URL”>Home</a><br />
<a href=”URL”>About</a><br />
<a href=”URL”>Website</a><br />
<a href=”URL”>We believe</a><br />
<a href=”URL”>Fashion</a><br />
<a href=”URL”>Sponsor</a><br />
<a href=”mailto:EMAIL ADDRESS”>Contact</a>
</span>

In the blog below we changed the Post Title & Sidebar Title fonts to Rouge Script, and gave each it’s own color (grey & pink.)

Enjoy.

{For WordPress blogs, including my own, I use a plug-in called AnyFont.}

 

Comments

  1. Justine says:

    Thank you so much! I have been working on changing the font on my blog all week and your website is the one that finally made it “click” for me!!

    All the best,
    Justine

  2. fathima says:

    Thanks so much for closing that link tag! Kept getting an error message but didn’t know how to close it.
    This post was really helpful, you rock :)

  3. Kelly L says:

    Thank you so much! I have been at this for hours! After I read your tutorial it took me 5 minutes! Thank you thank you!!!!

  4. Yes! This finally worked for me. I’ve been messing around with this all day trying to get it to work.
    Med School Mom recently posted..How to Make Pink Lemonade PieMy Profile

  5. Thank you for the advice, it’s helped me a lot with customising my site just now! :)
    Miss Fong (@missfonginhk) recently posted..My egg waffle manMy Profile

  6. sangram says:

    hey, Thanks a lot. I was looking to add ‘open sans’ to my blog & then realized something like gogle webfonts exists.. Thanks a ton..simple n awesome..
    sangram recently posted..Why you shouldn’t buy iPad Mini – Cons, Disadvantages of iPad MiniMy Profile

  7. sangram says:

    hey, Thanks a lot. I was looking to add ‘open sans’ to my blog & then realized something like gogle webfonts exists…simple n awesome..
    sangram recently posted..Why you shouldn’t buy iPad Mini – Cons, Disadvantages of iPad MiniMy Profile

  8. Erin says:

    Great tutorial! I’m new to blogging and am not a big fan of the traditional fonts in blogger. This helped me customize my fonts, and I look forward to working with it more. Thanks!!
    Erin recently posted..Giving ThanksMy Profile

  9. Emily says:

    Hi Carrie! I just wanted to thank you for your help; I finally managed to edit my title font after probably 1 1/2 hours. You explained everything so well :-)
    All the best and a happy new year!
    Emily ooo
    Emily recently posted..Jewellery Sale PicksMy Profile

  10. HELP! I don’t get how to change or insert the “code” portion into the template. I got through everything but how to change my text. I HATE how it always defaults to the Times Roman and then I have to do a “select all” and then change it to one of the six that are in the pull down window:

    Ariel, Courier, Georgia, Helvetica, Times, Trebuchet and Verdana. HOnestly, I dont like any of those but I always go with Trebuchet because it’s more like what I’d like.

    Id PREFER to be able to select from THIS list:
    font-family: ‘Rambla’, sans-serif;
    font-family: ‘Dosis’, sans-serif;
    font-family: ‘Domine’, serif;
    font-family: ‘Average Sans’, sans-serif;
    font-family: ‘BenchNine’, sans-serif;
    font-family: ‘Belgrano’, serif;
    font-family: ‘Neucha’, cursive;
    font-family: ‘Grand Hotel’, cursive;
    font-family: ‘Mouse Memoirs’, sans-serif;
    font-family: ‘Englebert’, sans-serif;
    font-family: ‘Playball’, cursive;
    font-family: ‘Handlee’, cursive;
    font-family: ‘Berkshire Swash’, cursive;
    font-family: ‘Archivo Narrow’, sans-serif;

    but I have no idea how to give myself the OPTION to select from a few?

    I hate this!!! I wish I were more tech savvy!!!
    April Driggers recently posted..Sunday StealingMy Profile

  11. maqbool says:

    Kindly tell me how to change all font of site by one google font??

  12. Andromachi says:

    Hello!
    Very helpful post!
    I once bought a premade template for my blogger, and i can’t change the font of my posts.
    Do you have any idea about how to change them?
    Thanks a lot!

  13. Very nice tutorial, now i actually learned how to add custom fonts to blogger. Thanks.

    Regards,
    Abdul Hanan

  14. Janith says:

    Thank you so much! :D

  15. Regina says:

    Thank you very much! This tutorial is very easy to be followed and it totally works on my blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge