Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security

Quick and Easy CSS @font-face Code

[ @font-face ] I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following:

  • Safari 3.1+
  • Opera 10+
  • Firefox 3.5+
  • Chrome 4.0+
  • Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. Of course, there are always weird exceptions contingent in particular scenarios, but overall it’s a solid chunk of code put together from much research, experimentation, and testing. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it..

Complete CSS @font-face code for embedding custom fonts

After uploading your set of custom font files to a “fonts” directory, add the following CSS code to your stylesheet, which itself should be located in the same directory as your fonts folder:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}
		/* display fonts */
		h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
		h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
		h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

That’s the magic ticket. In the first ruleset, we are declaring which fonts to use for each of the four different formats. After this, the next three rulesets are used to actually display the fonts according to our desired property values. You can apply just about any CSS styles you wish, so long as the font-family (or simply “font” if you are using shorthand) contains the name of your custom font.

Notice that we declare the font-family as “MuseoLight” in the first declaration block of the first ruleset. Then we also specify MuseoLight as the name of our first font for each of our heading selectors (h1, h2, and h3). After specifying our custom font, we then declare a couple of common system fonts – Verdana and sans-serif – to serve as fallbacks. In other words, this font-embedding technique degrades gracefully when the custom font is not displayed.

Update: check out the followup post on @font-face code for more information on proper usage.

For our custom font, we are using the beautiful Museo font by Jos Buivenga. You can embed just about any font you like1, so long as you include files for each of the following four formats:

  • .eot – e.g., Museo300-Regular.eot
  • .otf – e.g., Museo300-Regular.otf
  • .svg – e.g., Museo300-Regular.svg
  • .woff – e.g., Museo300-Regular.woff

There are many ways to obtain a good working set of fonts, but my favorite is Font Squirrel. They just make it so incredibly easy to download all of your favorite prepackaged @font-face kits. Just download, unzip, upload, and done!

Important notes

If for some reason your fonts aren’t displaying, here’s a few things to keep in mind:

  • Don’t nest different @ selectors!
  • Number one reason for failure is incorrect path names
  • Force-refreshing and/or emptying your browser cache may help
  • You may also want to append a query-string parameter to your CSS URL to force refresh the user’s browser

Also important to keep in mind is that font embedding is only possible because of the many talented people who freely share their ideas, knowledge, and discoveries with the open-source community. Thanks to them, we can all look forward a better font-embedding experience in the future.

Closing thoughts

Enhancing your design with some choice typography is a great way to beautify and personalize your website. Sure the CSS code looks rather grotesque, but it’s an effective solution for cross-browser font embedding. Just upload your four font files and slap in the code. It’s pretty simple, but feel free to ask any specific questions in the comments. I’m no font-embedding guru, but I’ve been designing with embedded fonts for quite awhile. As always, if you know of a way to improve on this code, speak up and share your wisdom!

Footnotes

  • 1 Assuming the font is licensed as to allow such use.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

23 responses to “Quick and Easy CSS @font-face Code”

  1. @Derek.: Thanks for the reply.

    I think I shall be giving this a go then.

  2. Unfortunately XP renders fonts awful and it’s still pretty popular. Or there’s a solution im missing?

  3. Thaks for the tip, Jeff. I’m using myself typekit in my site http://elnidodelkuko.com and works just fine but it’d nice to have a simple line of code to do the trick. Problem is XP doens’t render fonts the best way and everybody still has it.

  4. Thanks for the great article. I’ve used @font-face a few times – I really like how quick and easy it is, and the fact that it doesn’t require JS or some other magic to render. However, is there a way around the jagged edges that some fonts have when they render?

  5. Great article helped me out a lot.

  6. One little remark on this great article….

    The @font-face is not working in IE6 and FF 2.0
    I am forced to use both here at the office. :(
    IE6 is on windows server 2003 Enterprise Edition.
    FF 2.0 is on RedHat

  7. Jeff Starr
    Jeff Starr 2010/06/29 1:38 am

    Hi Jarno,

    That’s part of my work routine as well – I get to spend long hours in front of machines running IE6 and IE7. Firefox is easy to upgrade, unless there is a policy or something that prevents it. As far as I know, the operating system on PC is not a factor in browsers’ @font-face support.

    As for the larger issue of @font-face on non-supportive browsers, there are probably tedious, complex workarounds, but these days progressive enhancement is the most practical path forward. This means that designers need to implement suitable fallback fonts when using custom fonts via @font-face.

  8. is Museo300 family FREE ?

  9. I have used this code and still had problems with IE (6, 7 & 8).

  10. I can’t seem to get it to work with IE.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
2 things I hate to see in stylesheets: _ and #
Love VLC media player but it fails miserably when it comes to randomizing large collections of mp3 and other files.
Dashlane redesigned, stating proudly they "removed all filigree". Should have kept it; the app now looks generic and boring. Killed your identity.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .
Great tool for checking browser caching for web pages and all included files.
The new minimalist design styled by 14KB of CSS (uncompressed and un-minified). That covers 850+ posts and pages spanning 15 years of diverse content.