The Importance of Standard Fonts on Windows and Macintosh

Readers can't see fonts they don't have

White block letters spelling out FONTS
Caspar Benson / Getty Images

One of the best things about CSS is that you can use it to change the default fonts chosen by the browser manufacturers to a font that is more in keeping with your brand, your style, or your tastes. But, if you choose a font like "Goudy Stout" or "Kunstler Script" you can't be sure that everyone who views your page will see your fonts.

The Only Way to Guarantee a Font Choice Is With Images

If you absolutely, positively must have a specific font, such as for a logo or other branding element, then you should use an image. However, it's important to remember that images make your Web sites slower and harder to read. Since they can't be scaled, anyone who needs to make the font larger to read it won't be able to. Also, it's just not practical to make huge chunks of content into images.

Basically, it's not recommended to use images for text as the drawbacks outweigh the potential benefits. After all, the Web is not print, and a good Web designer is always flexible with their vision of their design.

Choose Your Favorite Font, Then Add More Common Fonts After It

If you absolutely must have Papyrus as your font for your text, you can still use CSS to style the fonts. Just make sure to use a ​font series so that customers who don't have that font but might have a different one will still see a design close to your vision. List the font families in your preferred order. In other words, if Papyrus looks best, list it first. The follow it with the font family that looks second best, and so on.

Always end your font list with a generic font. This will ensure that even if none of the fonts you've chosen exist on the machine the page will still display with the correct font type, even if it's not the right family.

Use Both Windows and Macintosh Fonts on Your List

While there are lots of fonts that have the same name on the Macintosh as on Windows, there are many that are different. If you include both a Windows font and a Macintosh font, you'll ensure that your pages look their best on both systems.

Some of the common fonts for the systems are:

  • Common Macintosh Fonts
  • Common Windows Fonts
  • Compare Windows and Macintosh Fonts

Here is an example of a good font list:

font-family: Papyrus, Lucida Sans Unicode, Geneva, sans-serif;

This list contains a popular font (Papyrus), a Windows font (Lucida Sans Unicode), a Macintosh font (Geneva), and finally a generic font family (sans-serif).

You Don't Have to Match the Generic Font to Your Favorite Font's Type

One eye-catching font example is Kunstler Script, which is a cursive font. If you use it, you shouldn't list "cursive" as the generic font, because most Windows systems use Comic Sans MS as the generic cursive font. Instead, you can tell the browser to use a sans-serif font if they don't have Kunstler Script. That way, you'll know that at least your text will be readable, if not in the exact style you want.