@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 Dolphin browser on Android.

It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.

The fonts and CSS are from FontSquirrel:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: local('☺'),
        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');
    src: local('☺'),
        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');
    src: local('☺'),
        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;
}

I've checked the SVG ID in the SVG font source, and they all match up.

Could it be because I've got some letter-spacing rules later on in the CSS?

Thanks!

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!

Answer 2

According to http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 and 4.3 do not support woff fonts. So you must add ttf as well. I am testing on Android 4.1 and 4.2 and woff seemed to be ok! But on 4.0.3, I had to add tff fonts.

See this link http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ to see how to download ttf fonts from Google.