Safe to Use @font-face Yet?

If you’re not familiar with @font-face yet don’t fret. For years web-safe fonts have been the only easily used fonts for web designers. Along the way, Flash and image alternatives have been made up to accommodate the barren typographic landscape of the web.

The obvious reason for lack of web-safe fonts is that displaying a font on a website requires it to be installed on the computer viewing it — of which only a handful are universally accepted as common enough to be web-safe.

A technique called @font-face was invented to remove the dependence on a user’s computer and instead use fonts from the web itself. So, in short, it pulls fonts from a web server rather than a local computer, making them viewable by anyone…almost.

Slow Browser Support

While @font-face does its job well, we’re stuck relying on browsers to support the feature. Surprisingly, Internet Explorer was an early supporter — since version four. The limitation is that it required fonts of a certain font file type that was/is infrequently used (.eot).

Fast forward to today and now every major browser supports @font-face in some sort of fashion. Firefox just announced support for the newest supported font type: .woff. So the web font is still evolving, but the big question: is it safe to use yet?

Yes, you can use @font-face successfully in all current versions of major browsers!

The Wait Is Over

All major browsers now fully support @font-face. You’ll need to pay close attention to which browsers accept which font types, but as long as you provide all of the different font types required you’ll achieve the desired effect.

Browser	.otf TT, .ttf	.otf PS	.eot	.svg	.woff
IE4+
FireFox 3.5
FireFox 3.6
Chrome .3
Chrome 4
Safari 3.1+
Opera

What Fonts Can You Use?

Any font can be used now with the availability of font converters. The best font converter I’ve found is Font Squirrel’s @font-face Generator. With many different settings for generating the most compatible font and the option to generate all possible font types, Font Squirrel’s generator is amazing.

Seriously, Any Font?

First, any font can be used assuming a font generator is able to properly render all  of the necessary font types .

However, judgment is necessary in which fonts you choose. Because you’re placing fonts on a server and making them publicly available you cannot use fonts that restrict distribution. So, only fonts that explicitly allow the use of a font for whichever purpose you’re intending (commercial, non-commercial, non-profit, etc.) are allowed to be used. In other words, if you have to pay for a font you likely cannot use it.

As An Example

The header above (As An Example) and many other elements on this page are using the font Graublau Sans Web, a free font available for use on the web.

Using @font-face

I think the easiest way to understand how to use @font-face is to simply download a font package from Font Squirrel and look at the stylesheet provided.

Available Font Types

TrueType (.ttf)

TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. Source

OpenType (.otf)

OpenType is a format for scalable computer fonts. It was built on its predecessor TrueType, retaining TrueType’s basic structure and adding many intricate data structures for prescribing typographic behavior. Source

OpenType PS (.otf)

In addition, we have the PostScript (PS) “flavor”, sometimes known as OpenType PS or CFF-based OpenType and having an “.otf” file suffix. Adobe and font producers including Elsner+Flake, Emigre, Storm and URW++ typically produce fonts in the OpenType PS flavor. Source

OpenType TT (.ttf)

OpenType terminology redefines Windows TrueType fonts as “the TrueType (TT) flavor of OpenType”, sometimes called OpenType TT and having a “.ttf” file suffix. Microsoft and other font producers including Linotype typically produce OpenType fonts in the OpenType TT flavor. Since OpenType TT fonts are for all practical purposes internally the same format as Windows TrueType fonts, there are no problems getting such fonts to work in Windows. Even Windows 3.1 from 1992 will display such fonts. Source

Embedded OpenType (.eot)

Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Source

Scalable Vector Graphics (.svg)

Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). Source

Web Open Font Format (.woff)

The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn’t introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers. Source

Related posts:

1. What is Your WordPress Experience Level?
2. Develop Daly, Version 10
3. How I Backup Everything
4. Backups, You Better Have ‘Em