Skip to Content

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.

Lena

Thursday 19th of January 2012

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

michele

Friday 27th of May 2011

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!

Bee

Tuesday 19th of April 2011

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

Lena

Wednesday 20th of April 2011

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.

Kristen

Wednesday 13th of April 2011

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

Londoneya

Monday 11th of April 2011

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!