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!
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!