Search code examples
androidcssgoogle-chromefont-face

@font-face not working in Android browsers


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?

Screenshots

Android 4.0.3 browser:

Screenshot of oftn.org

Chrome 19 on Windows 7:

Screenshot of oftn.org

Firefox 13 on Windows 7:

Screenshot of oftn.org


Solution

  • 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.