CSS3 Properties with Fallbacks 01

CSS3 Properties with Fallbacks 01

@font-face

@font-face allows for fonts to be downloaded from a web server
to the user’s computer to correctly render a given font.
The syntax is:

@font-name {
font-family: ““;
src: url()format(‘‘);
}

Because @font-face has been around for awhile. it’s one of the only
CSS3 features that is supported by all browsers. However, the older
IE’s require that the font is of the .eot file format. The good news:
IE9 now supports the .woff format.

One issue to be aware of is licensing. Be sure the font you’re creating
the @font-face files for actually supports being used as a web font.
Another issue is the flash of unstyled content (FOUT).

There is a true bug with the older IEs: even when an .eot file is established
and is stacked correctly in the @font-face decalaration, the IEs still may not
render it due to being distracted by the subsequent values. To get around this,
it helps to have two @font-face declarations: the first one with the .eot by itself,
and then the second with the standard @font-face declarations.

There’s also a bug with WebKit browsers when applying font-weight: bold or
font-style: italic to @font-face’d text: it doesn’t work. The fix: add normal
to font weight, style and variant in the @fontn-face declaration to set a baseline.

The full solution
This solution incorporates a fix for the IE bug and sets a baseline for font weight
and variant changes:

@font-face {
font-family: ‘Colaborate Light’;
src: url(‘ColabLig.eot’);
src: local(‘=)’), url(‘ColabLig.woff’) format(‘woff’),
url(‘ColabLig.ttf’) format(‘truetype’);
font-weight:normal;
font-style:normal;
font-variant:normal;
}

The smiley face glyph is intentional: it keeps the browser from looking for a
local copy of the font and forces it to use the downloadable ones. Alternatively,
to proactively code for potential Internet Explorer bugs:

@font-face {
font-family: ‘Colaborate Light’;
src: url(‘ColabLig.eot’);
font-weight:normal;
font-style:normal;
font-variant:normal;
}

@font-face {
font-family: ‘Colaborate Light’;
src: local(‘=)’), url(‘ColabLig.woff’) format(‘woff’),
url(‘ColabLig.ttf’) format(‘truetype’);
font-weight:normal;
font-style:normal;
font-variant:normal;
}

TOOLS: Font Squirrel has a great @font-face kit generator that will give you
the fonts in all of the formats desired plus the CSS.