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.