The CSS3 @font and 3D Transforms - dummies

By David Karlins, Doug Sahlin

The practical impact of a couple of CSS3 features is not yet proven — the @font property (which has generated considerable buzz) and an emerging set of 3D transforms.

If you apply @font for custom typefaces, or 3D transforms, be sure your page works well in browsing environments that don’t support these effects. And, because that isn’t so easily done with @font or 3D transforms, you might want to wait and see how they develop.

The @font transform in CSS3

The concept behind @font is that developers can finally break free of the tight constraints regarding what fonts can be used in web pages by uploading custom fonts that users then download to view on the page. However, @font is something of a flawed concept, and to the extent it has potential, the implementation is not in place to make this accessible for most web designers. Here are a few of the problems @font comes with:

  • Operating systems don’t have these fonts installed. With a resolution (in dots per inch) about four times grainier (or less dense) than print resolution, the web demands fonts that are relatively simple. Creative designers exploit CSS tools for micro-tuning font height and spacing to create unique and intriguing type using standard fonts that are already installed in most computers.

    In other words, in many cases, designers can use CSS to create unique looking fonts without resorting to asking users to download a font before a page can be viewed.

  • Visitors have to download a font into their operating system before the font applies. Doing so tends to prompt warnings in browsers and requires a process that, in time and complexity, is more likely to drive a visitor away from a site than make her browsing experience more positive.

  • Custom fonts have to be purchased. Licensing legal use of custom fonts involves rather complex licensing contracts, and the costs begin at several hundred dollars (to use a custom font in a single site).

  • Support for @font is emerging more slowly on mobile devices than it is for full-screen environments. The most popular mobile operating system, Android, for example, adopted full support for @font in version 4, but many smartphones still run on versions of Android 2 and 3.

At times, downloadable fonts can be appropriate. For example, if you’re Keith Richards of the Rolling Stones, you can use a downloadable custom font. But if your browsing environment can’t handle downloadable fonts, his staff of developers has created scripts that detect that your browsing environment doesn’t support downloading the font and supply a graphic image of the type instead.


With all those cautions, if you want to install and apply custom fonts, follow these steps:

  1. Purchase a font or find a free one online.

    Sources like provide downloadable fonts as well as installation tools that help install, implement, and troubleshoot downloadable custom fonts. In many cases, the “steps” might end here — if you can spend in the range of $500 for a downloadable font set (sets include options like italics, bold, and so on), this is probably a good option.

  2. Install the font.

    If the font didn’t come with an installation package or instructions, you can install it by saving the TTF or OTF file to your website folder.

  3. At the top of your external CSS file, add this code:

    @font-face {
    font-family: xxx;

    xxx is the name you will use in styles to assign the font, and yyy is the TTF (or OTF) filename for the fontface you downloaded.

  4. With the preceding code at the top of your CSS file, use the font name as part of style definitions.

    For example:

    font-family: yyy; courier;

    Courier is the backup font that will appear in browsers that don’t support your downloadable font.

3D transforms

3D transforms can rotate an object on either the x-axis (horizontal) or y-axis (vertical). Because flipping an object horizontally or vertically has very limited design implications, these transforms are intended to be combined with JavaScript or other animation and interactivity tools to make objects flip and spin.

Even more limiting is the narrow scope of browser support for 3D transforms. At this writing, only browsers built on the WebKit engine (Safari and some versions of Chrome) support 3D transforms.

With those caveats, here’s an example of applying a 180-vertical spin to a class selector (.rotate_3d):

      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);