These days, whenever I’m about to use a webfont on a new site I generally find myself searching for the latest “definitive @font-face syntax” that covers all modern browser/device needs.

For a long time I headed straight for Paul Irish’s Bulletproof @font-face Syntax but I noted a few years back that he’d stopped updating it.

Now, when buying webfonts from type foundries such as Fontsmith, the foundries themselves do tend to provide guidelines. However, I’m not convinced that these are sufficiently cross-platform compatible.

Recently I’ve been reading Flexible Typesetting by Tim Brown and in it he recommends Webfont Handbook by Bram Stein. That’s now next on my reading list, however in the meantime I found on A List Apart an excerpt from Stein’s book which deals specifically with the best modern @font-face syntax.

Based on Stein’s advice, here’s what I’m now using.

@font-face { font-family: Elena; src: url(elena.woff2) format("woff2"), url(elena.woff) format("woff"), url(elena.otf) format("opentype"); }

Soon we’ll be able to reduce this to simply:

@font-face { font-family: Elena; src: url(elena.woff2) format("woff2"), url(elena.woff) format("woff"); }