@font-face not working in mobile Webkit

Question

I\'m having trouble getting @font-face to behave in any mobile Webkit browser I\'ve tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphi

Answer 1

As it turns out, the syntax was wrong. I stumbled across this solution via twitter:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

It worked perfectly. Just checked in all major browsers, and my fonts show up, including on Android and iOS.

Now, my CSS reads like so:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

Glad to know there's a better bulletproof solution out there than the dang smileyface hack.

Hope this helps somebody!