Blogspot 101: Using a Non-Blogger Font in a Post

by Revka ~ September 9th, 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.*

One of my most popular posts at The Porch Light is where I talk about discovering how to use in a post a font other than the default Blogger fonts.  Apparently, a lot of people want to know how to do that.

Before I divulge the secret, it is important that you know 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 realize that not everyone will know that you have used it.

On to the good part.  Here are the steps needed to change a portion or even the whole post into a non-Blogger font.

  1. Click on the Edit HTML tab for your post.
  2. Insert your cursor directly in front of the first word that you want to be in a different font.
  3. Type the following: <span style=”font-family:occidental, georgia, ‘times new roman’, serif”>

    Note
    : You should replace the font names I used with the names of the fonts you want to use. Names with multiple words, like Times New Roman, should be enclosed in single or double quotes, and I recommend specifying several fonts so that if your viewers’ computer doesn’t have the first font (or second), it they have additional options.  I also recommend having serif or non-serif as your last font in case none of the fonts you chose are installed on your viewers’ computer.
  4. Now place your cursor directly after the last word you want in the special font and type </span>.
  5. Click the Compose tab to see how it looks.
  6. If you like it, publish your post.

If you want to write the whole post in a different font, simply place the code from step 3 at the very beginning of you post and place </span> at the very end of your post.

Please feel free to leave your questions and comments in the comments for this post or to e-mail them directly to revka@designsbyrs.com.

My next tutorial will tell you how to change your template HTML so that your whole blog is written in a non-Blogger font.  Until then, happy blogging!

11 Responses to Blogspot 101: Using a Non-Blogger Font in a Post

  1. Melissa in Mel's World

    GREAT TIPS!!! Thank you so much! ~Melissa

  2. Revka

    You’re welcome, Mel. :) Glad you found this post useful.

  3. daniel

    will this method also work for the blog main title?

    thnx
    dan

  4. bopdilly

    Excellent blog! Interesting article and very informative! I will necessarily subscribe for this blog.

  5. TAM

    I have just read the two articles on changing font options in HTML. Thanks! I’m wondering, though, is there a way to ADD fonts to the standard default ones that appear as choices on the Font/Colors drop down in Layout – so I can always choose different fonts (i.e. comic) right from layout, instead of having to always go into HTML and change…

    Thanks!

  6. Kay

    I want to change post title font to something ornamental..any suggestions…

    Thanks
    Kay

  7. Gwen

    I tried many times but it didn’t work.T_T

  8. HTML color

    Did you know that the Basic HTML Color set is a combination of 216 color? You can find a tabulated view of the basic HTML color on the internet. It can be handy when you need to quickly choose a standard HTML color for your site or any other project.

  9. Mikailah

    I tried it and it worked the first time, but after that, I tried to do the different font and it kept using the first one I tried. Other wise it is a fabulous tutorial. ;)

    Thanks! <3

We Welcome Your Comments

...but spam will be deleted. Thanks!




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