Snippet — Custom Fonts Fix

Font embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended.

Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.

But what about earlier browsers?

While researching an issue, I came across a solution that should help when using custom fonts. On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font. When you look at the code coming across the wire, it shows IE 8 and before fail to load the font files, it was constructing weird GET requests that returned 404 errors.

You can tweak your CSS so IE9 loads the .EOT file instead. You merely need to change format(‘eot’) to format(‘embedded-opentype’). This will cause IE9 to load the EOT file instead of the WOFF. IIS knows about EOT files by default so it will work.

Another fix that is used by Font Awesome is to add ?#iefix to the eot url in the CSS that contains the font-face.

Your stylesheet looks like this:

	@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 */
	}

view raw

css-fontface.css

hosted with ❤ by GitHub

More about fonts

Embedded OpenType (EOT) fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files use the extension “.eot“. These font files can be created from existing TrueType font files using Microsoft’s Web Embedding Fonts Tool (WEFT), and other proprietary and open source software.

The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009 and is now a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and some additional metadata. WOOF supports font distribution from a server to a client over a network with bandwidth constraints.