Skip to content

New @font-face syntax

New @font-face Syntax
The availability of fonts that can be used has grown massively over the last couple of years, with services such as Typekit and Fontdeck taking the hassle out of serving fonts to the world. Services such as sIFR and Cufon are now largely out-dated unless in certain circumstances (corporate fonts for example may need some protection from publishing the font file on the server). One of the most common ways to embed custom fonts on a webpage is through the @font-face declaration, and there is a new syntax which should be used now which handles Android devices and IE9 a lot better, and also is a lot cleaner and easier to maintain.

The syntax is:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');

I think you’ll agree that’s a lot easier to understand and maintain. The question mark at the end of the eot declaration is the key here, so head over to Font Spring for a full explanation of the new syntax.

© 2018 Graeme Pirie