Further Hardening of the Bulletproof Syntax

Further Hardening of the Bulletproof Syntax

For context, please read our earlier post about this syntax.

A potential looming problem with the new syntax we introduced earlier this month was raised by Microsoft. The soon-to-be-released IE9 comes with a feature that allows it to render in both IE7 and IE8 Modes. In these two modes, Microsoft ‘fixed’ the parser bug that affected the actual IE7 and IE8. This fix breaks the @font-face syntax for those compatibility modes.

Extra Bulletproofiness

Therefore, in the interest of forward compatibility, we’re recommending a tweak to the syntax to address this issue.

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

This syntax is exactly the same as our previous iteration with the addition of a second ‘src:’ attribute that specifies the EOT again. We’ll leave it up to you to decide if this is necessary.

It certainly mucks the code which we worked hard to clean, but you gotta do what you gotta do.

Browser compatibility

Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

Ethan Dunham
Ethan Dunham
President and Chief Daydreamer.
Recommended Posts
  • Duke 3D

    Nice helpful article – how does woff2 fit into the scheme?

    When does it make sense to embed as data into the css file to eliminate one or more requests and when is it more efficient to use font files so that only the file that the browser understands is downloaded.

    Just by being linked from the css, do all the files get downloaded regardless of whether they are compatible? If so, should browser features be sniffed to serve only the best format?

    I have read that fonts must be served from the same server in some browsers. Does that mean CDN delivery systems like Google fonts are not truly cross-browser and there are circumstances/browser types where the files should be brought into and served from the local server? Is that done with a secondary instance in the font-family stack?

Leave a Comment