Smarter ideas worth writing about.

Moving Beyond Arial and Verdana with Web Fonts

 
Why Use Web Fonts?

Consider the following presentation of section headers illustrated in the fonts Smokum and Verdana:

 

If your client requests a western-themed website, which font would you use? Clearly, Smokum is the more appropriate choice in this context.

In the early days of the Web, the only way to employ Smokum in such a design would have been to create a graphic of the Western text and embed that graphic in the webpage, repeating the process for each header element. To edit a header, the graphic file would have to be opened, altered and re-exported. Something as minor as a color change to the headers would not be a trivial task on a large website. Furthermore, text graphics do not scale well, are not SEO-friendly, and slow down page loads.

We can easily circumvent the overhead associated with text graphics by linking the actual Smokum font files to our document. In doing so, when a visitor loads our webpage, he will not only load our HTML, CSS, graphics, etc., but also the Smokum font. Thus, while the visitor may not have had Smokum installed on his machine prior to visiting our site, he will still be able to view Smokum in all its smoky glory. This capability not only gives the designer a great deal of flexibility when it comes to font selection during the design process, but also makes text editing a breeze following site launch.   

 

How to use Web Fonts

The first step in using web fonts in your document is to identify an appropriate font for your layout. Adobe Edge Web Fonts, Google Web Fonts and Font Squirrel are excellent places to begin searching for free web fonts. Alternatively, commercial fonts can be obtained from sites such as Typekit and Fontdeck.

If you have rights to a font you'd like to use, you should create alternative versions of it in order to achieve the broadest possible browser support. The following font formats will cover your bases: OpenType (OTF), TrueType (TTF), Embedded Open Type (EOT), Web Open Font Format (WOFF), and Scalable Vector Graphics (SVG). Simply use Font Squirrel's excellent @font-face kit generator to obtain the necessary files.

After collecting the font files you'll need for your website, you'll need to link to them in your CSS document using the @font-face property. Assuming we'll be using Smokum located in a "fonts" directory in the root of your site, your CSS would include the following:

 

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

 

Note that setting the font-weight and font-style to normal here will ensure that all browsers default to the same values and allow you to apply a faux bold or italic style later in the CSS. Without this snippet, Webkit browsers will ignore any weight or style commands.

You're now ready to use Smokum anywhere in your site. Simply build a font stack like you normally would, using your custom font identifier, Smokum, at the beginning. For example, to style your second-level headers using Smokum, just add the following to your CSS:

 

h2 {
font-family: Smokum, Georgia, Palatino;
}

 

It's important to add fallback fonts just in case, for some reason, Smokum doesn't load or display. As usual, it's always good practice to test your work on multiple browser/platform combinations.

Share:

About The Author

Front End Developer

Micah is a front end developer in Cardinal's Cincinnati office who is passionate about technology, usability, and heavy metal.