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
11 replies on “Safe to Use @font-face Yet?”
[…] This post was mentioned on Twitter by Patrick Daly, WordPress Rocker. WordPress Rocker said: Safe to Use @font-face Yet? http://is.gd/7cwE1 (via @developdaly) […]
[…] the exact content of the site, but it will help me determine whether or not posts like “Is @font-face Safe to Use Yet?” needs more or less explanation of the general topic of web fonts. With that said, leave your […]
Hello Patrick, loved the post and listed it in a font-face resource page I just published here http://www.ashbluewebdesign.com/2010/02/font-face-resources/
Have you heard anything about Adobe licensing font-face fonts? All you can do right now is embed them into PDFs >_< I'm wondering if they'll sell font-face licenses?
http://forums.adobe.com/thread/549725
My guess is that Adobe won’t allow
@font-face
usage until they have their own TypeKit-like solution.Social comments and analytics for this post…
This post was mentioned on Twitter by developdaly: Safe to Use @font-face Yet? http://goo.gl/fb/9z06…
You are the man! Great summary.
Hey,
This found doesn’t work in Firefox 3.5. For instance you’re saying the header should have it but it doesn’t show.
I just checked it out in 3.5 on Linux and PC (couldn’t get a Mac screenshot yet) and it works fine in both of those. Are you on a mac?
[…] Safe to Use @font-face Yet? – Develop Daly (Jan. 2010) […]
I tried to apply @font-face on my test site http://test.jpretired.cz/
It works on the home page ONLY!
Does anybody have an advice for me?
Thanks
You inserted the @font-face CSS into the body on the home page. You should put it in style.css since its included on every page.