4/10/2013

Using custom fonts in your Blogger template

| 3 comments

This post will be about applying custom fonts in your Blogger template using Google web fonts. I'll be assuming you are already familiar with HTML and CSS so I won't get into much of its details -- but feel free to ask if you need any help.

Selecting your font at Google web fonts.

Go to Google web fonts and select a font to use. You can choose more than one font and several styles but note that the more fonts and styles you use, the longer it will take to load your page. For this sample, I'll be using "Open Sans" for the header.

Select fonts to use. Choose fonts to use.

You can Review your fonts to test it further. Once you are alright with it, click on Use to be able to get the code to add to your template.

Select font styles. Check which font styles will be used.

For now, I will only be checking "Normal 400" which is equivalent to the regular font style. Scroll down the page and you will see a code you can copy for your template. Note that you should use the code under the Standard tab.

Copy the embed code. Copy the code to embed fonts to your template.

Adding the code to your template.

After copying the code, open your template and paste it inside the <head> tag. After pasting, make sure to add a trailing slash ("/") to the <link> tag.


<head>
...
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
...
</head>

Without the trailing slash, you will get an error like the following:

We were unable to save your template. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The element type "link" must be terminated by the matching end-tag "".

Using your custom fonts.

After adding your fonts, select the elements you would like to use it for. For this sample, I'll be styling the blog header. So for the header of my demo blog, I'll be using the following code:


.Header h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 7em;
  font-weight: normal;
}

You can add this before ]]></b:skin> or if you know your way around, combine it with an existing selector in your template.

Apply custom font. Change after using a custom a font for the header.

Remember earlier, I only selected "Normal 400" from the font styles to use. The problem with this is that its equivalent bold, italic or other styles will be rendered differently and depending on the font, might not be readable (or appear slightly distorted).

So going back to the Google web fonts page, select all styles you will be using and update your embed code. For this sample, I selected Normal, Italic, Bold and Bold Italic.


<link href='http://fonts.googleapis.com/css?family=Open+Sans
:400italic,700italic,400,700' rel='stylesheet' type='text/css'/>

Again, don't forget the trailing slash ("/"). So now, to use the different font styles, just use either the font-style or font-weight attributes.

.Header h1 {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 7em;
  font-weight: bold;
  /* or font-weight: 700; */
}

Below is a comparison of the font with and without using its true style.

Comparison of font styles. Comparison of faux (left) and true (right) font styles.

Recommended links

And that's it. If there's anything I missed or messed up, just leave me a comment below.

3 comments:

  1. Wow what a wonderful post it has full of idea i really like this .I want more of this.

    Best regards,
    Bernard Zherge
    nulled Stock Photos

    ReplyDelete
  2. This is really an amazing post. Now I am ready to change my fonts in my site . Thanks for sharing.

    ReplyDelete