Using Webfonts

Created Tuesday, 27 November 2012 09:53 Last Modified Sunday, 16 June 2013 13:01

There are many ways to use custom fonts beyond the old web-safe standards like Georgia, Verdana, Times New Roman and Arial. We'll go through them in a second, but first let's get one big thing out of the way:

Webfont Licensing

Always, always, always make sure you are not violating the license agreements for the fonts that you use. It takes a lot of skill to come up with a unique way to draw the alphabet and make all the characters in the font work cohesively. Type designers are like any other artist or craftsman: in order to keep doing what they love, they must make money from their trade. They do this by selling license agreements to use their fonts. So, please don't rip them off by violating their license agreements.

In addition to licensing agreements, you should be aware that there are a lot of ethically gray to black areas on many 'free' font sites. Some designers have re-drawn famous designs and posted them as their own work with slight alterations. Additionally, many of these 'free' fonts are okay to use for personal projects, but require that you contact the designer to obtain permission to license them for commercial projects. If you use a 'free' font, make sure it is free to use for what you are using it for.

Now we can dive in to methods for how to use our legally licensed fonts.

Using @font-face

@font-face is one way that we can use custom fonts in our css. To use @font-face, we'll need to download an @font-face kit. Font Squirrel provides a curated library of @font-face kits which have the correct licensing agreements for commercial use. In addition, they also provide a @font-face generator that can turn a font you find somewhere else (legally licensed of course) into an @font-face kit. Some commercial type vendors like MyFonts and FontSpring also sell licenses for using fonts with @font-face.

Once you have downloaded your kit, you should unzip it to find several font-files, along with a sample css file containing some code that you will need. For this example, I am going to use the typeface Alex Brush by St. Louis area lettering artist Rob Leuschke.

To use the fonts included in the kit, I can either link to the css file included in the @font-face kit on my web page, or I can copy the css from that file to a css document already linked from my web page (make sure that you load the @font-face rule before you try to use the font - remember that the c in css stands for cascading). To properly use @font-face in my web document, the css would have to look something like this:

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

This code would use Alex Brush wherever a class of cursive was assigned. Important note: you'll notice that font-weight and font-style are both 'normal'. It is possible to use fonts that have multiple styles and weights using @font-face, however, if the font doesn't have multiple weights or styles, and you try to assign them anyway, the browser may either distort the fonts-design to produce a horrible best-guess output as to what it would look like, or it may not display the font at all.

There are some downsides to using @font-face. For one, if you are serving the fonts from the same server as the rest of your website, the fonts can dramatically add to the size of your web page and cause for some very slow loading. Whenever possible, I try to use one of the methods below to load my fonts with asynchronous downloading (this means that the user can be downloading content from both my server and another server at the same time).

Using Google's Font Library

Google's web font library contains a large number of designs you can use in your CSS. Their usage process is extremely simple and layed out in a step by step manner. I would suggest using their standard method for using fonts in the library - it's simple and it just works. Since the usage process is so well documented on their site, and is potentially subject to change, I am not going to document it here. Just make sure that you read the directions.

Using Adobe Typekit

Typekit is a company that Adobe bought which is subscription based and allows you to use a lot of high quality commercial web fonts served up quick and easy from extremely fast servers. If you have a subscription to Adobe's creative cloud, you also have a subscription to Typekit.

The process of using Typekit is very well documented and not really worth re-writing here. There are also a lot of features I haven't mentioned in this brief description. Just be aware that it is an extremely powerful and easy-to-use option should you choose to use it.

Additional Notes On Font Services

There are a lot of other font serving services, and some other methods for serving up web fonts - it seems that a new one pops up every few months or so. Just make sure that if you choose a service, that it is something you can rely on. You may not be able to start a bank from your garage, but you could theoretically start a font-serving service from one...

Web Analytics