Recently I hit a roadblock while trying to load Typekit fonts onto a website. No matter I tried, the fonts wouldn’t appear and replace the headings I wanted them to. I’m using LESS to write the CSS and compile it using LESS.app on OS X. Usually the following would have worked:

h2 {
    font-family: gooddog-new-1, gooddog-new-2;
}

However, while inspecting the h2 headings with Firebug, the selector was completely empty:

h2 {
}

The fix is annoyingly easy. You just need to make sure to escape the CSS so LESS can parse it correctly. I’m not sure if this is isolated to using LESS.app to compile the CSS, as I haven’t tried any other method. Interestingly enough, it seems you don’t have to do this when using Google’s web fonts, they load just fine.

h2 {
    font-family: ~"gooddog-new-1, gooddog-new-2";
}

If you would like to use nicer fallbacks for browsers that don’t support the @font-face rule, you would write it like so:

h2 {
    font-family: ~"gooddog-new-1, gooddog-new-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Just remember to only escape the Typekit fonts, and not the entire line. Note the quotation marks already wrapped around “Helvetica Neue”.