Google Web Fonts working locally in IE8+

webFontsLocal.md

##The Issue

Referencing web fonts that are hosted on Google Fonts doesn't always work. This could be because of:

• inconsistent browser security permissions (IE8 is a soul crusher).
• referencing the fonts from within an iFrame.
• domain restrictions on your production server.

You can get around these issues by hosting the fonts locally in your project

Font + CSS Setup

• Download a zip of the font you want from Google Fonts. You only get the TTF version of the font.
• Use Font Squirrel to convert the TTF font into all the over versions we need (IE8 requires EOT).
• Add the generated fonts to your CSS directory and then reference them in your CSS. You can just copy this from the demo css that Font Squirrel generates.

Here's an example of my css for Oswald Bold 700:

font-family: 'Oswald';
src: url('oswald-bold-webfont.eot');
src: url('oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('oswald-bold-webfont.woff') format('woff'),
     url('oswald-bold-webfont.ttf') format('truetype'),
     url('oswald-bold-webfont.svg#oswaldbold') format('svg');
font-weight: normal;
font-style: normal; 

HTML Publisher Note

You need to make sure that your font files get published to your module, by adding them to the FileTypes array in the HTML Publisher (Screenshot):

File Types: [".css",".js",".gif",".jpg",".png",".eot",".svg",".ttf",".woff"]