1. DESIGNING YOUR BLOG
“How to Add Custom Fonts to
Blogger with Google Web Fonts”
JANUARY 2nd 2013
www.bloggerial.com
Wednesday, January 2, 13
2. Custom Font for your Blog Post Title
Wednesday, January 2, 13
3. Why would you want to add your own font to
your blog?
You want your blog design to be unique
Wednesday, January 2, 13
4. Visit Google Web Fonts and browse through the huge selection of fonts available.
Add the fonts you'd like to use to your "Collection"; these will then feature in the
blue "collection" bar which appears at the bottom of the page (click on the title to
reveal/hide this section).
Wednesday, January 2, 13
5. Next you'll need to add a link
to the dynamic CSS file which
will import your Google Web
Font selections for use in your
Blogger template.
On the Google Web Fonts
page, scroll down to the third
section which features the code
you need to paste into your
site:
Copy this code to your
clipboard, or paste into a text
file, to use shortly.
This code will be used later (in
slide 9).
Wednesday, January 2, 13
6. Log into your Blogger dashboard and choose
Template -> Edit HTML.
Wednesday, January 2, 13
7. Search for the opening <head>
tag. Immediately below this
line, paste the code you copied
from the Google Web Fonts
page.
You'll need to "close" the CSS
link tag with a forward slash
“/” or you'll receive an error
message when you try to
preview or save your changes.
Now save your template.
To give you an example, here's the original code
generated for the web fonts example in this post.
Wednesday, January 2, 13
8. Now, log into your Blogger dashboard and choose
Template -> Click Customize.
Wednesday, January 2, 13
9. Specify the web fonts in your CSS
The best way to achieve this is by adding CSS code in the Advanced
section of the Blogger Template Designer.
For example, to use your desired font for the blog title, I could add this
code (see slide 5 to see where to get the code for this):
h3.post-title {font-family: ‘Anahoim', sans-serif;}
Don't forget to save your changes once you're happy with your new fonts!
Wednesday, January 2, 13