Web-fonts – Make Something Beautiful

Posted on
by Craig Hall.

Choosing the right font can make all the difference.

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.

Example:
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

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.

I’ve included an example of an @font-face declaration below.

Example:

@font-face{
font-family: 'MyFavoriteWebFont';
src: url('MyFavoriteWebFont.eot');
src: url('MyFavoriteWebFont.eot?#iefix') format('embedded-opentype'),
url('MyFavoriteWebFont.woff') format('woff'),
url('MyFavoriteWebFont.ttf') format('truetype'),
url('MyFavoriteWebFont.svg#webfont') format('svg');
}

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Built in Wordpress — Fueled by The Contrado Group