How to Use Other Fonts for Blogspot

A blog post's font can affect the content's style and tone.

While you can select from more than 80 different font faces through the Blogger -- also known as "Blogspot" -- template designer, you can use any other font of your choosing by modifying a single line of CSS code using the Blogger HTML Editor. Font faces are not embedded within a website but rather live on each individual visitor's computer, so if you choose an obscure font face, only those people with that font installed on their computers will be able to see your blog in that font. If your reader does not have that font installed, he will see the back-up font you specified. If he also does not have that back-up font, it will show his personal Web browser's default font.

Instructions

1. Log into your Blogger account at Blogger.com.

2. Click "Design."

3. Click "Edit HTML."

4. Press "Ctrl" and "F" to bring up a search box.

5. Type "font" without the quotation marks into the search box. You should see multiple instances of the word "font" within the code box that look like this:

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">

   <Variable name="tabs.font" description="Font" type="font"

   default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>

6. Scroll through the code until you find the corresponding section for the part of your blog for which you want to use a different font. Look next to "Group description" to see what blog section each code snippet refers to, such as "Tabs Text" or "Post."

7. Add your preferred font at the very beginning of the list of fonts for that section. For example, to add "Webdings" as the default font for a post title, your resulting code would look something like this:

   <Group description="Post" selector="h3.post-title, .comments h4">

   <Variable name="post.title.font" description="Title Font" type="font"

   default="normal normal 30px Webdings, Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>

8. Click "Save Template" to save your font changes.

Tips & Warnings

• Depending on your selected Blogger theme, your default list of fonts within the code may look different than these examples.

• Click "Preview" to see how your new font looks on your blog before saving your changes.

References

• Google Blogger Help Center: Fonts and Colors Tags for Layouts

Resources

• Blogger: Create a Blog