Blogspot 101: Using a Non-Blogger Font in Your Template

by Revka ~ December 30th, 2008. Filed under: Blogger Tutorials.

*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box.*

My last tutorial (it can’t possibly have been nearly 4 months ago when I published it!) told you how to use a non-Blogger font in a post.  But what if you want all of your posts to be written in a non-Blogger font, or what if you, like Daniel, want to change your blog title’s font?  It would be a big pain to have to code each post individually!  There is a much better way to change your universal fonts: change them in your blog’s template.

Important: Before I divulge the secret, please note that specifying a font does not necessarily mean that your reader will see that font.  A font will only be visible to a reader if they have that font already installed on their computer.  Have fun with this new trick, but make sure you specify several fonts to give your readers the best chance of seeing your blog as you intended.

On to the good part.  Here are the steps needed to change the universal fonts to something other than the default Blogger fonts:

  1. Login to your blog and go to Layout.
  2. Click on Edit HTML.
  3. Find the variables section.
  4. Find the variables that have font names.  You can change any or all of these. 
    Example
    – the Blog Title Font:
    <Variable name=”pagetitlefont” description=”Blog Title Font”
    type=”font” default=”normal normal 200% ‘Calisto MT’, ‘Bookman
    Old Style’, ‘Baskerville Old Face’, ‘Book Antiqua’, serif” value=”normal
    normal 200% ‘Calisto MT’, ‘Bookman Old Style’, ‘Baskerville Old Face’, ‘Book
    Antiqua’, serif”>
  5. (still using the example) Change the fonts in value=”normal normal 200% ‘Calisto MT’, ‘Bookman Old
    Style’, ‘Baskerville Old Face’, ‘Book Antiqua’, serif” to be want you want.
    Remember to specify several fonts so that visitors who don’t have one font
    can view it in another.  End with serif or sans-serif, depending on what
    type of fonts you chose.
  6. Preview your changes.
  7. If you like what you see, save your changes.

Please feel free to leave your questions and comments in the comments for this post or to contact us directly.

8 Responses to Blogspot 101: Using a Non-Blogger Font in Your Template

  1. Terrah

    I am loving all of your tips and inspiration! Quick question for you… what font is this that you are using on your blog? It is definitely the one that I want to use.

  2. Terrah

    Okay, I figured it out. Century Gothic! duh. ;)

  3. goingreen

    thank you for the tip, what I would like to change is the font and size of the post title, I can’t find a Variable for that. I have read and tried lots of tricks but they all gave me errors.

  4. Katie

    Thanks for the great tips!!!

  5. Daniel

    Hey thanks for the tricks! I have just successfully changed my default font in my blog =D
    Daniel´s last blog ..Latest RS Generators (Always Updated) My ComLuv Profile

  6. Shannon

    Thanks for the info! Do you know of a way to “upload” a font to your template so that you readers can see it even if they haven’t downloaded the font on their computer?

  7. Axa

    Thank you so much. I have been racking my brain out for two days. And you help me out a great deal.

  8. Leonor

    Thanks, it really worked!

We Welcome Your Comments

...but spam will be deleted. Thanks!

CommentLuv Enabled



© 2007-2008 RS Designs | design by Revka and Linda of RS Designs Berries and Cream Blog Design