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

Leave a Reply

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt