@font-face not working in mobile Webkit

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!

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.