Using Fonts.com Web Fonts with Blogger.com

This is the first in a series of articles about using Fonts.com Web Fonts in popular web authoring sites. I'll start with blogger.com.

There are two ways to specify fonts on your web site. One way is to create a style sheet on the Fonts.com Web Fonts portal. The other way is to specify them directly using font-family. You can use one or the other – or both at the same time.

Start by navigating to your Fonts.com Web Fonts account at www.webfonts.fonts.com. If you haven't done it already, create a project for your blog, add your blog's domain (i.e. http://yourblog.blogspot.com/ and choose the fonts you'll use. If you are planning to use the style sheet method, assign them to selectors. You can use the handy 'CSS Sucker' tool to extract your selectors if needed (for more detail, see our blog post entitled "Fonts.com Web Fonts Adds CSS Sucker and Import/Export Features"). If you're not sure about which selectors affect which pieces of your text, use (for example) the 'Inspect Element' feature of the Firebug plug-in for Firefox. Once your style sheet is all set (and even if you are not using the style sheet method), save it by pressing "save changes and update style sheet". Now head over to the 'Publish' tab. Choose your publishing option, click on 'Select code', and copy your code.

Log in to Blogger.com and click on 'Design' to get to your blog's design page. Choose 'Edit HTML'. You'll want to save a copy of your template in case you mess things up. Now, in the 'Edit Template' box, locate the string "". Paste the code before the statement. Save it away, refresh and you should see the effects of your style sheet changes. If not, give it a couple minutes – sometimes the CDN needs some time to propagate your changes.

You can now use the font-family property as you 'Edit HTML' on Blogger.com. The Fonts.com Web Fonts 'Publishing' page tells you the font-family names to use: