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

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

  5. says

    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

  6. 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!

Leave a Reply

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

CommentLuv badge