Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@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

like image 690
Eli Grey Avatar asked Jun 08 '12 08:06

Eli Grey


People also ask

How do I change my browser font on Android?

Click the three dots at the top-right of your Google Chrome screen, and then choose ”Settings”. On the left side of the screen, click on ”Appearance,” and then choose ”Customize Fonts” in the center of the screen.

Is font face deprecated?

According to Apple's documentation, @font-face is deprecated for use on the iPhone version of Safari.

How do I fix my browser font?

Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.


1 Answers

.woff is not supported in android

check font support

Edit: i think the page is loading correct because it looks same on desktop.

Our Name
ΩF:∅ means "ohm-farad to none", and we usually pronounce it as "often".
like image 62
Siddhesh Avatar answered Sep 30 '22 12:09

Siddhesh