To take advantage of Google Web fonts, you need to modify two areas of your blog template. So, first things first. Start by clicking on "Design" in the Navbar (upper right corner of your blog), then click on the link titled "Edit HTML" below the row of tabs. The next thing you should do is click on "Download Full Template" and save your blog template to your computer for backup in case you need to restore it after attempting to modify its contents.
Now that you have saved your blog template, it is safe to proceed. Back on the Edit HTML page, there is a large text box with a scrollbar on the right. Inside the text box is your blog's template. The first thing you need to do is pick a Google Web font from the Google Font Directory. Let's try it with the Web font named "Reenie Beanie". Then, without moving the scrollbar down at all, you should see an HTML tag in your template that looks like this: <head> That tag marks the beginning of the head section of your blog, and you need to enter this line right below the head tag, like so:
<head>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css' />
You can learn more about that line from the Quick Start Guide. The next part is a little harder. You now need to scroll down to the beginning of your blog template's Variable Definitions where you will see a line of code that looks like this:
<Variable name="body.font" description="Font" type="font"
default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic normal normal 16px Arial, Geneva, sans-serif"/>
This variable has the name "body.font", and it is the one that Last Comments uses to set the font of the recent comments list it produces, so this is the line we will be modifying to work with Google Web fonts. Notice that there are five attributes: name, description, type, default, and value. We will be modifying the value attribute.
The value attribute is comprised of at least five pieces that must be in an exact order, so you have to be careful here. The first three components are the font-style, the font-variant, and the font-weight:
- The font-style can be either normal or italic.
- The font-variant can be either normal or small-caps. Small-caps are not supported by Google Web fonts, so always enter normal for the second component in the value attribute.
- The font-weight can be either normal or bold.
If you are missing any one of these three components, go ahead and enter them in the proper order. A handy way to remember the order is that it is alphabetical (s before v before w). Also, if they are in the wrong order, please reorder them. Typically, all three components are set to normal, otherwise all unstyled text on your blog will be italic, small-caps, or bold. For this example, we will change the italic font-style as shown to normal.
The next piece of the value attribute is the font-size. In my example above, the font-size is 16px. You should probably choose a size somewhere between 12px and 18px, but you can set it at any size you want, really. Usually, you won't have to change the font-size, but if it is missing, you need to enter it as the fourth component.
The next piece is the font-family. Font-family is actually a list of comma separated font names. The first (or leftmost) font name listed is is what determines which font your blog's main text will display in, and it also determines the font the Last Comments gadget will display in. You can list as many different fonts as you want, and the browser will keep trying to use them one by one until it finds a font that it recognizes. Since we put a link to the Reenie Beanie font at the top of the blog template, the browser will be able to use Reenie Beanie when displaying your blog text. In my example above, the first font listed is Arial. To make Reenie Beanie the font used by your blog for main text, enter 'Reenie Beanie', in front of the word Arial. The single quotation marks around Reenie Beanie and the comma after it are required. Any font with a name that has spaces in it needs to be in single quotation marks, and commas must separate every font in the list.
That's all there is to it! The body.font variable should now look like this:
<Variable name="body.font" description="Font" type="font"
default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal normal 16px 'Reenie Beanie', Arial, Geneva, sans-serif"/>
You can now save your template by pushing the "SAVE TEMPLATE" button below the text box. If you entered the components correctly and in the correct order, when you view your blog next time, your text will be in the Reenie Beanie font and Last Comments will be showing your most recent comments in the Reenie Beanie font.
Tip: If you do not want to change your blog's font, but want to use one of the Google Web fonts for Last Comments, you can skip adding the <link> tag below the <head> tag and instead simply add the name of one of the Web fonts to the front of the font-family list in the value attribute of the body.font variable (it would be component number five after the font-size). That way, your blog will not recognize the Web font and will instead use the next font in the font-family list, but Last Comments will recognize the Web font and download it and use it for your comment list.
