The font choices in the Template Designer are very limited and you may not find the best suited for your blog. You may have seen other blogs using fonts that are not available in the Blogger Template Designer and you're wondering how they did it. The easiest way to add a custom font to your blog is thru Google Fonts. There are over 600 fonts to choose from and it's impossible that you won't find a single font that you will like :)
So now I'm going to teach you how to do this.
1. Go to Google Fonts and choose the font you would like to use for your blog. And click the Quick Use button to get the code.
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
So your code should now look like this:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>
4. To add the second code, go to Template Designer > Advanced> Add CSS
Paste the second code but don't save it yet. We need to add a selector above the code.
For changing the font of the POST TITLE, copy the code below and paste above the CSS code generated by Google Fonts.
h3.post-title {
5. Add a closing curly bracket at the last line. Your code should now look like this:
Done!
When changing the font of other elements, just change the selector and do the same steps.
Here are some selectors and their description
.Header h1 [blog title]
.Header .description [header description]
.post-body [the text in your posts, excluding sidebar texts]
.date-header [date above the post title]
.widget [text within a gadget/widget]
If there's an element you want to edit but is not listed above, just leave a comment.
Happy coding!
0 comments:
Post a Comment