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+ No No Yes No No
FireFox 3.5 Yes Yes No No No
FireFox 3.6 Yes Yes No No Yes
Chrome .3 No No No Yes No
Chrome 4 Yes Yes No Yes No
Safari 3.1+ Yes Yes No Yes No
Opera Yes Yes No Yes No

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

WordPress Tips 2010

For the past two years I’ve give ten tips on how to better use WordPress so I wanted to continue the tradition. This time, however, I’m taking a bigger picture look at the WordPress horizon. These “tips” are less tangible than adding a snippet of code to a template or installing a new plugin. Still, you’ll surely find them helpful for understanding WordPress more as well as keeping up with the always evolving software.

WordPress Tips 2010

For the past two years I’ve give ten tips on how to better use WordPress so I wanted to continue the tradition. This time, however, I’m taking a bigger picture look at the WordPress horizon. These “tips” are less tangible than adding a snippet of code to a template or installing a new plugin. Still, you’ll surely find them helpful for understanding WordPress more as well as keeping up with the always evolving software.

Also, there’s many posts out there featuring tips for WordPress. Honestly, I don’t have much more to add at this point. That said, after the 3.0 launch in April 2010 there will be much more to discuss.

Theme Frameworks

My prediction is that before long the majority of new themes will be child themes. That is, once the WordPress theme repository supports child themes I think they will catch on quickly with developers and gradually gain users. The reason is simple. Child themes are easier to make, maintain, and switch between than traditional themes.

The parent/child theme relationship is already possible with any theme, but frameworks built for the sole purpose of being said framework are so robust and well thought out that they’ll pioneer the themeing frontier for the next couple of years.

WordPress = BuddyPress + WordPress MU + bbPress

So this equation has long been one of frustration.

  • If you wanted to use BuddyPress with WordPress you needed WordPress MU.
  • If you wanted to use bbPress with WordPress it needed it’s own install.
  • If you wanted to use bbPress integrated with WordPress you got a headache.
  • If you wanted to use WordPress MU with all of the features of its standalone counterpart then you had to wait.

This year will be dominated with consolidation. All of these separate projects are already in the works to become seamless. WordPress MU will simply become WordPress. BuddyPress will work in WordPress. bbPress will become a plugin that will fit right into WordPress.

This has to be one of the most exciting things for developers. Suddenly managing these different properties will reside under one roof. Nuff said.


The driving force behind WordPress’ success is community. 2010 seeks to make the community more accessible. Ideas are floating around about how to revamp to be more community-centric, giving everyone a voice and making ideas actionable.

On top of this, the WP user base is so large now that feuds pop up about the differences in how WordPress should be run. While its not ever a good thing to quarrel, it is nice to know that people care enough about this project to put their feelings into it.

And then on the flip side, the user base is so diluted with every type of person out there that wrangling the community is harder than ever. So it may not be long before large groups begin to move away from WP to find their new, upcoming project. There’s nothing wrong with that — its how WordPress grew to be so successful. Don’t fret though, WordPress is here to stay for a long, long time.

Pro, Premium, Core Plugins

I’m not differentiating between these three categories of plugins. They all share the same idea of being well-developed and supported plugins. In other words, its taking more and more to be considered a worthwhile plugin these days. Its the nature of capitalism at work and its been great for producing some high quality projects so far. The downside, of course, is that competing with the “big boys” is becoming harder.

But, an experiment is upon us and officially supported plugins (those that WordPress will put a stamp of approval on) are nearing. The debate is back and forth over whether having “official” plugins is good or not, but it should at least prove to be a move in the right direction for those wanting a bit more stability and longevity out of their sites.

Re-Dedication to Perfection

Matt and the WordPress committers have always been keen on keeping the code clean and bug-free. Nothing can be perfect, of course, but there seems to be a renewed spirit of making sure the best quality code gets into the core. Beyond that, there’s a promise for more stringent testing phases to ensure that bugs are caught and fixed before major releases. This comes from keeping the development cycle more organized and also from a simple spirit of making 3.0 the best WordPress ever.

CSS Video Tutorials

Great CSS: Level 1I‘m pretty excited to announce the availability of a new series of video tutorials on CSS.

Together with O’Reilly, we’ve put together (what we think) a unique set of tutorials that make learning CSS easy. Instead of reading a book this time, we’ve made it easy to watch 2-7 minute video clips on specific topics of CSS. This is great because you actually see how things are done. It’s also online which makes it much more organic than a book that’s written and never altered. This means that we’re able to add more tutorials where we see fit or even correct errors or provide further clarification.

I don’t need to go on and on about it here. Instead, check out the information page for the table of contents and a bit more explanation.