The following @font-face
declarations work fine in in every major browser (including Chrome for Android)
except for the Android Browser
and Firefox for Android
(from http://oftn.org/css/global.css):
@font-face {
font-family: "OFTN Aller";
src: url("../fonts/OFTN-Aller-Bold.woff") format("woff"),
url("../fonts/OFTN-Aller-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "OFTN Aller";
src: url("../fonts/OFTN-Aller.woff") format("woff"),
url("../fonts/OFTN-Aller.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
What could I be doing wrong?
Android 4.0.3 browser:
Chrome 19 on Windows 7:
Firefox 13 on Windows 7:
I subset OFTN Aller (bold) more since I'm not using it for other headers any more (only the logo) and that seemed to solve the problem.