Web-fonts – Make Something Beautiful

In the early days of the internet, the internet was the wild west in many respects, yet when it came to typefaces, we had few choices and those we did have were referred to as “Web-Safe” fonts. The so called web-safe fonts are listed below along with their fallback generic family type of serif, sans-serif or monospace.

Serif Fonts

Georgia, serif

“Palatino Linotype”, “Book Antiqua”, Palatino, serif

“Times New Roman”, Times, serif

Sans-Serif Fonts

Arial, Helvetica, sans-serif

“Arial Black”, Gadget, sans-serif

“Comic Sans MS”, cursive, sans-serif

Impact, Charcoal, sans-serif

“Lucida Sans Unicode”, “Lucida Grande”, sans-serif

Tahoma, Geneva, sans-serif

“Trebuchet MS”, Helvetica, sans-serif

Verdana, Geneva, sans-serif

Monospace Fonts

“Courier New”, Courier, monospace

“Lucida Console”, Monaco, monospace

The fall back is listed as a backup, which is to be used if the specified font isn’t available on the users system.

This is a font stack declaration for a body tag, showing the preferred font, a fall back and a generic fall back.

While these fonts are utilitarian and do the job we now have web fonts available to us which allow us to specify a wider variety of fonts which will display correctly on (almost) all user machines.

Web-fonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

How do I use web-fonts?

You must upload your web-font kit to your website. They should be in or near the same directory as your CSS files.

Include your web-font stylesheet

To use web-fonts, you must first make a CSS @font-face declaration allows each browser to select the font it needs from the various formats.

Modify your existing stylesheet

Now that you have a new web-font available to you, you need to tell your stylesheet where to use it. Look at the@font-face declaration I included above, there is a property called “font-family.” The “MyFavoriteWebFont” name listed there is how you will reference or “nickname” the font. To use your new web-font, simply reference that webfont name to the font stack in the “font-family” property, inside the selector you want to change.

Example:p { font-family: 'MyFavoriteWebFont', Times, serif; }

Why can’t it be easier?

There are also several web font services available such as Adobe’s Typekit https://typekit.com/, Google’s – Google Fonts http://www.google.com/fonts, with both serve up the font files from a Content Distribution Network (CDN), for increased availability and fast downloads. These services also alleviate the need to house the font files on your server, you merely reference them in the head section of your file and declare them in your CSS.

Take a few minutes and play around with web-fonts. Choosing the right font can make all the difference.