In four easy steps!
- 1. Pick your font.
Go to Google Web Fonts and add the font you like to your collection.
In this example we’re going to pick Fredericka the Great font. After you added it to your font family collection you’ll click on the button “Use”.
- 2. Get the code.
Now we’ll need to 2 sets of code to add to our Blogger blog’s HTML & CSS.
- 3. Embed the font family.
Copy the first box of code and paste it after the <head> section in your HTML. See below, right after the <head> section I pasted the new font family code.
And here’s the part that’s not documented on Google Web Fonts site, that I’m going to tell you because I don’t want to you go crazy like I did… you must insert a “/” backwards slash at the end of the code. The code you copy from their site will not have the “/” you need to add that yourself right after the type=’text/css’ before the ending “>”.
- 4. Integrate the fonts into your blog.
Copy the code in the second box and place it in your template where ever you want the new font to be.
Let’s say you wanted to change the font of the post titles. Search your HTML for the code that defines your post titles, it may look something like this:
.post h3 {
font-family: ‘Fredericka the Great’, cursive;
…
}
If you want to add it to the sidebar titles, too, look for that code:
h2 {
font-family: ‘Fredericka the Great’, cursive;
…
}
Replace the code for the original font-family with your new font-family.
If you want to change the size, color & weight (bold, not bold) you may also add these to the same section.
h2 {
font-family: ‘Fredericka the Great’, cursive;
font-size: 21px;
color: #333737;
font-weight:normal;
}
{Title fonts can be coded <h1> to <h6>, these tags are used to define HTML headings and can be different depending on which Blogger template you are using. Look around in your code, you’ll usually be able to tell which is which by the grouping/heading they are under. When in doubt change a setting and use preview to check it – if it isn’t right go back to your code, click clear edits and try again.}
- Examples
In the blog below we changed the Post Titles and the Sidebar Titles to Fredericka the Great font.
In the blog below we changed the Post Title & Sidebar Title font to IM Fell French Canon SC in grey & red velvet, and we used Parisienne font in gold in an HTML widget to define the blog’s links in the upper left sidebar.
The HTML widget code will look something like this – with a span code to determine the font used:
<span style=”line-height:110%;font-family:Parisienne;font-size:37px;”>
<a href=”URL”>Home</a><br />
<a href=”URL”>About</a><br />
<a href=”URL”>Website</a><br />
<a href=”URL”>We believe</a><br />
<a href=”URL”>Fashion</a><br />
<a href=”URL”>Sponsor</a><br />
<a href=”mailto:EMAIL ADDRESS”>Contact</a>
</span>
In the blog below we changed the Post Title & Sidebar Title fonts to Rouge Script, and gave each it’s own color (grey & pink.)
Enjoy.
{For WordPress blogs, including my own, I use a plug-in called AnyFont.}
