How to Use More Fonts on Your Website

photo http://www.sxc.hu/photo/595207 by ChanMuk http://www.sxc.hu/profile/ChanMukOnce upon a time, your choices for fonts on the web were limited.

In fact, when I coded my first website, there were about 4 fonts you could use. But since you could also use bold, italics, and blink, what more could you want?

You could want everything your word processing tool can do, which is what most folks have been awaiting for over a decade. “Why can’t I use Frutiger on my website like we have in our brochure?” The answer is technical, legal, and often unresolved.

Google has given us a leg up on taking one step closer with its web fonts.

Spinhead.com uses Marmelad for the text and headers; everything except my logo. My publishing website uses Marmelad and Special Elite.

The instructions for using Google fonts are straightforward. If you’re comfortable mucking with your WordPress theme, you can use any or all of the 600+ fonts Google serves. Please, don’t. Limit yourself to two at most. Every font, ever variation of a font you choose, adds load time to your site. It also moves away from simplicity.

There’s a Google fonts blog, in case you’d like to become a fontaholic, and sites sharing beautiful font pairings and opinions on what’s beautiful, in case you’d like an artistic nudge to get you started.

And, as always, ask questions in the comments form and I’ll answer them.

This entry was posted in Coding and tagged , , . Bookmark the permalink.

2 Responses to How to Use More Fonts on Your Website

  1. Karen J says:

    Sidetrack question for you, Joel (my specialty, apparently):
    “…you could also use bold, italics, and blink, …”

    blink ??? Enh??? Autocorrect error?

    • Inside web developer joke.

      Internet Explorer 3 (and maybe 4) recognized the tag “blink” which, as it says, made the text inside it blink. Used instantly for advertising tricks. Now mercifully removed, it was the bane of all web developers. “Can we make this part blink?” There was always a client who want something blinking.

What do you think?