Struggling with getting @font-face to function properly across various mobile Webkit browsers. So far, it's not working on Safari for iPhone 3GS, default Android 2.2 browser, and Dolphin browser on Android.
Interestingly, it does work seamlessly on all desktop browsers including IE7 to IE9, FF3.5, Safari 4, and Opera.
The fonts and CSS are sourced 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;
}
Verified the SVG ID in the SVG font source files which all appear to be correct.
Wondering if the issue could be related to letter-spacing rules applied later in the CSS?
Appreciate any insights or suggestions!