Pin It

Add CUTE Fonts To Your Blog- The Easy Way!

I have finally found an easy way to add fonts to your blog- Google has released fonts that can be embedded on almost anyway on your blog.
Want to know how to do it?

For those that have blog templates with the font types already hard-wired into the blog html/css code- you can add fonts this way:
Go to your template designer (Dashboard>Design>Template designer) and under advanced settings- change your font to any of the new ones google has provided. Depending on your template you should be able to change the font almost anywhere on your blog. That’s it, it’s pretty simple.

If your template isn’t hard-wired to use the built in fonts- then you cannot add fonts in this way. You’ll need to add them in manually- here’s how you do it:

1. Select your font(s):
Go to google font directory and pick the font you want to use.

2. Once you have picked your font click on the chosen font to get the embed code.

3. Click “get the code” button on the right hand side. This will open two boxes of code, now copy the top box of code

4. Now return to blogger and go to your html section. Now look for the </head>tag and paste the code directly under that line

5. Once you code is added make sure to add a ‘/‘ at the very end, just before the last pointy > bracket!

Your code will look like this:

<link href=’http://fonts.googleapis.com/css?family=Dancing+Script‘ rel=’stylesheet’ type=’text/css’>

6.  Now look for your header, sidebar or post title- in your html code. It will look similar to this:

#header h1 {
font: arial, Times new roman;
/* font-variant: small-caps; */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $blogTitleColor;
}

.post h3 {
margin: 0px 0px 10px 0px;
padding: 0px 0px 7px 0px;
color: $postTitleColor;
font: arial, Times new roman;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 2px solid $posttitleBorderColor;
}

 
#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar1HeaderColor;
font: arial, Times new roman;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1HeaderBorderColor;
}

7. Now remove the line in red and replace it with this code:

font: 28px ‘FONT NAME’, arial, serif;

you can adjust the size- by increasing and decreasing the number. Pay around with the size however you like.

8. Hit preview- to make sure it looks right. Now hit save and you are done!

If you have any questions about this tutorial don’t hesitate to ask.

Comments

  1. Danielle says:

    This is awesome! I bought a pre-made template a while ago that I LOVE but I'm not crazy about the font, this gives me the confidence to change it out….thanks!!

    Danielle
    http://www.organizationalhysteria.com

  2. You may have just made my blog cuter. Thanks!

    p.s. Love your blog. :)

    http://mymontessorimoments.wordpress.com/

  3. Mom of the Twinkies and Tot! says:

    Thanks for filling me in on the new blogger fonts available! I had noticed some changes on other blogs I follow & was wondering how everyone was getting the cute fonts! Now I can have them too!

  4. The Education Of Ours says:

    yes! I know what I'm doing tonight while I watch Glee ;) updating fonts. Lori, I did notice your pretty blog updates!

  5. i prefer the old template of blogger for my blog. so this tutorial was perfect for me. thank you!

  6. Thank you so much for your help, was having so much difficulty adding it until I found your tutorial, then it worked like a breeze. God bless you!

  7. Thank you so much for this! And your helpful tutorials :o)

  8. I am unable to change it as what you taught here, Lena…. >.<
    I'm not sure what have I done wrong.

    • do You know if you have to add your fonts in manually? or are they hard wired in? you can go to your template designer>advanced to find out. it should give you the ability to change your font if it is- then you can just change them in there.

  9. michele says:

    Hi I happened to come across this site and it was so helpful!! I was wondering if I could maybe get some help with adding fonts in the footer section? I’ve added footer columns on my blog but my cute font isn’t appearing … you can email me! Thanks!

  10. this is what I need right now!
    tx a lot for ur site! its very useful)

Trackbacks

  1. […] I tagged this because i want to give it a try!  Haven’t done it yet, but maybe tomorrow!! Follow @mommymomentblog and their blog Link in Tweet: Add CUTE Fonts to Your Blog – The Easy Way! […]

Add Your Comment

*