Monthly Archives: March 2013

Use Web Fonts to Spice Up Your Website

The Font Dilemma

For many years, web creators were forced to make a choice. Limit the use of fonts to web-safe typefaces that users are most likely to have on their devices (with a short list of fallbacks) or use rasterized text (graphics) to add a little more variety.

The problem with using web-safe fonts was that it was so limiting. Designers want users to experience their web creations the way they envisioned them, using specific fonts that users may not have access to.

Turning text into graphics meant that webcrawlers (programs used by search engines) couldn’t search those pieces of text. That can be bad for search engine optimization.

Web Hosted Fonts

Then came Google and a few others to the rescue. With the introduction of web-hosted (and licensed) fonts such as Google Web Fonts, web designers now had access to a much wider range of fonts that would always display the way they wanted.

To use a web font, one adds a link to the location of the font file (either on Google’s web font server or in a subdirectory on the website site’s own server) and then references the typeface in the CSS file.

Still, Less is More

While the introduction of web fonts opens up new possibilities, some restraint is still in order. You should still limit the number of fonts you use on your site to just a few. To do otherwise can create problems.

First off, using too many fonts (whether web-safe or web-hosted) can cause your site to look disorganized. Way too many can make your site look like a ransom note from a kidnapper.

Also, using more than one or two web fonts can slow page loads. With every additional web font you use, the browser has to work that much more. Google offers a meter that tells how fast a given font will load.

Other Hazards

Make sure the fonts you use are easily readable. When fonts are hard to read, users go somewhere else without so much as a “Fuck you”.

Don’t use faux bold or faux italic. For bold or italic text, make sure the fonts you use have those weights/styles available. Otherwise, your bolded or italicized text will look like shit.

Some fonts are for personal use only! Read the licensing on fonts. If you use a font for commercial use that isn’t licensed as such, you could get a nasty-gram from some greedy lawyers.

Have fun!

Explore the wide range of fonts now available. Check out Google Web Fonts, Font Squirrel and Typekit.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.