Web design and development for companies and individuals in the Czech Republic
+420 608 713 199

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.

Interested in our services?
Hire Us