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