The New Bulletproof @Font-Face Syntax
fontspring.com has published the new bulletproof @font-face syntax, which, despite its simplicity, remains fully compatible with different web browsers:
@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');
}
Earlier one should put a stand-alone @font-face declaration to have it work in IE<9. That was because of a parsing bug (If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis.). To solve this problem so to have multiple urls and font formats you should put a hash mark after eot filename… Yep, such a simple solution will shorten your css code.