BLACKBELT

CSS Front-End Development

Authored by Corey Ballou

3 Comments

CSS3 @font-face With Bold and Italic Support

The @font-face CSS tag allows web designers and developers to specify custom fonts to display text on their web pages. Allowing websites to utilize custom fonts removes the burden of requiring your website visitors to have the custom fonts installed on their personal computer. The following examples use the DejaVu Sans font, which is freely available for download here.

Generic Syntax

  • a-remote-font-name: The name of the font to be used as the font-family value.
  • source: The URL or relative path to the font file stored on the server.
  • format: A font format hint to aid the browser with determining the type of font. Possible values include truetype, opentype, truetype-aat, embedded-opentype, and svg.
  • weight: A font-weight value (i.e. strong, 100, 200, etc.).
  • style: A font-style value (i.e. italic).

Cross-Browser Caveats

As pointed out in the comments section by Hammil, there are a couple of caveats to getting your declarations fully functional in IE due to lack of TTF and OTF font support. Beyond that, IE’s @font-face parser is screwy and attempts to read subsequent rules which should only apply to other browsers. For the sake of brevity, I will link to Paul Irish’s post Bulletproof @font-face syntax for a more in-depth view at why you need yet another IE workaround CSS solution. The version below has been updated for cross-browser correctness utilizing the “Smiley Variation” hack.

Please consider using the FontSquirrel generator as it auto generates IE compatible EOT files and takes all of the pain out of generating your own @font-face rules.

Example with Bold & Italic Support

Example without Bold & Italic Support

Usage

Once you’ve added @font-face to your CSS file, you can freely reference the font to your hearts content. Here’s a quick example:

h3 { font: bold 18px/24px "DejaVu Sans"; }

Browser and Font Format Support

  • Webkit/Safari 3.1+ – Support for TrueType/OpenType TT (.ttf), OpenType PS (.otf), SafariMobile (.svg)
  • Opera 10+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg)
  • Opera Mobile 9.7+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg)
  • Internet Explorer 4+ – Embedded OpenType (.eot) created with Microsoft WEFT Tool.
  • Mozilla/Firefox 3.5 – TrueType/OpenType TT (.ttf), OpenType PS (.otf)
  • Mozilla/Firefox 3.6 – TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF
  • Google Chrome 4.0+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf). Disabled for security review.

Full specifications of the CSS3 @font-face tag can be found at w3.org, including using different platform versions of fonts for more cross-browser compatibility.

Author: Corey Ballou

Corey is a seasoned PHP developer specializing in custom web applications development. He is an avid blogger, open source contributor, beer lover, homebrewer, entrepreneur, and Queen City PHP co-organizer. You can follow him on Twitter @cballou or visit his website coreyballou.co.

  • http://github.com/himmel himmel

    You left out all the good parts. Checkout Paul Irish’s bulletproof @font-face syntax http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

    • http://www.jqueryin.com cballou

      Thanks for the link himmel, I’ll have to create a new updated section for IE support. I don’t know if I’d go as far as saying I left out all of the good parts, but I did skip right over IE quirks.

      On the other hand, I think you can take all that you’ve learned from Paul’s Bulletproof @font-face post and apply it quite easily to add support for bold and italics. I’ll have to add the smiley variation here as an update with a note regarding IE support.

  • http://orkax.net dolkun731

    THANKS! I’m a Uyghur from urumqi in china. can the code rong or right?

    @font-face {
    font-family: Alpida Unicode System,Uyghur Ekran, UKIJ TUZ TOM, Alkatip Tor, Microsoft Uighur, Verdana,sans-serif;
    font-style: normal;
    font-weight: normal;
    src: url(‘/eot.eot’);
    src: local(‘Alpida Unicode System Regular’), local(‘Alpida Unicode System’), url(‘/eot.ttf’) format(‘truetype’), url(‘/eot.svg#Alpida Unicode System’) format(‘svg’), url(‘/aus.woff’) format(‘woff’);
    }