How to Use @font-face In Your Designs (+ 6 Excellent Web Font Libraries)

Managing fonts on the web has always been a headache. Designers had to worry about font stacks, or browser compatibility issues or worse yet, just embed the text into images. Some designers went as far as using Flash replacement techniques to manage their typography.  It was a pain. Worse yet, some of these solutions hurt site performance and usability as much as it caused designers headaches.

Over the last few year’s better methods have been created. The font stack still exists, but CSS and JS advancements allow for fonts to be downloaded and rendered on the fly. There are still browser compatibility issues to contend with but the transition to better font management is well on the way.

One of the most popular methods to handle web typography today is @font-face CSS. It requires no Javascript and can be used with many different font libraries. It does not work in every browser but is still one of the best options available.

What is @font-face?

From the @font-face website:

@font-face is a CSS rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

More info at their site.

How do I use @font-face?

The basic implementation couldn’t be easier. The first thing to do is define a rule for @font-face.

@font-face {

font-family: DeliciousRoman;

src: url(http://font-face.com/fonts/delicious/Delicious-Roman.otf);

font-weight:400;

}

“font-family” is what you want to call the font. It’s the font name. The next parameter is “src”. That is the path to where the font file can be found. The third parameter to set is “font-weight”. It is not needed for normal, but it is required by anything else, such as bold, thin, etc).

Once you have defined this rule you can use that font throughout the rest of your CSS just as you would any other font.

Like so:


p  {

font-family:DeliciousRoman, Helvetica, Arial, sans-serif;

}

In some instances the font provider may require you to use a snippet of Javascript to deliver the font. In those cases they will provide the required JS. A font provider is a site that offers font libraries for use with the @font-face method.

Considering browser compatibility and font types

The three most common font formats used by designers today are .eot, .ttf, and .otf. This is where browser compatibility comes into play. Not every browser handles each file type. Additionally some browsers may require additional options to be added to the @font-face CSS rule. We’ll go into this in more detail in a later post on advanced implementations.

6 Excellent Webfont Libraries

There are many sites out there that offer fonts that can be used with @font-face. Some are free, and some require a license. Below is a list of some of our favorite libraries.

Google Webfonts - http://www.google.com/webfonts

Cost: Free, $0.

Library Size: 501 font families

The Good: It’s free. Supports the iPhone and iPad.

The Bad: Limited fonts. Probably won’t find the exact font you need.

Fontsquirrel - http://www.fontsquirrel.com

Cost: Free!

Library Size: 783 font families

The Good: It’s free. You can upload your own font kit. Great variety of stylish fonts.

The Bad: Uploaded fonts don’t always look as good on the web.

Typekit - http://www.typekit.com

Cost: Subscriptions starting at $24.99/yr

Library Size: 729 font families

The Good: High quality font library. You can see examples of how a font renders in different browsers.

The Bad: Requires Javascript.

Fontspring - http://www.fontspring.com

Cost: Per font pricing

Library Size: 4013 font families / 109 free fonts

The Good: Large font selection. No bandwidth restrictions.

The Bad: Self-hosting only.

WebINK - http://www.webink.com

Cost: Subcriptions starting at $20 per year

Library Size: 400+ font families

The Good: Nice selection of fonts. Live preview mode.

The Bad: The quality of fonts will vary. They have a font matching system to help find similar font styles.

Webtype - http://www.webtype.com

Cost: Annual per font licenses

Library Size: 400 font families

The Good: Quick and easy setup. Ability to host custom fonts.

The Bad: The fonts can be expensive compared to the other sites.

1 Comment Permalink