font-face on android 4.0.x doesn't work

Question

I'm building a mobile Application with JQM and I need to declare own Fonts with font-face.

I'm including the font css file fonts.css as the first loaded css file in my index.html and declared the font-faces like this:

@font-face {
    font-family:"MyFont";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/MyFont.woff");
    src:url("fonts/MyFont.eot?") format("eot"),
        url("fonts/MyFont.woff") format("woff"),
        url("fonts/MyFont.ttf") format("truetype"),
        url("fonts/MyFont.svg#MyFont") format("svg");
}

My two Test devices are the Google Nexus 7 with Android 4.2.1 and a Motorola Razr with Android 4.0.4.

On Google Nexus, it works both on mobile Chrome and with PhoneGap. But on the Motorola Razr, it works only with mobile Chrome. Both the stock Android Browser and Phonegap don't use MyFont.

Is there any Workaround to get the my Font work on Android 4.0.x?

Answer 1

Interesting. I'm having the reverse experience.

I have a Galaxy Nexus running 4.2.1 (CM 10.1), that was loading fonts absolutely fine until the upgrade, but has started getting really weird with the CSS since the update (only in the native WebKit, not Chrome, which still works).

I realized it was not the font-face issue, but that the CSS specificity is getting screwed up (using bootstrap as a base, and then replacing with my own CSS). Even inline styles don't show up if bootstrap included, everything works fine if bootstrap removed. Very strange.

As for your reverse of my issue, a couple of thoughts:

• Why the first src with a .woff? I've seen it with a .eot for IE backwards compatibility mode, but browsers using .woff should be able to use it from the second src. Maybe try removing the first src? (This shouldn't be the issue, as WebKit should overwrite with second src)

• How are you loading the font files? From local storage? From a web server? I know with Firefox if the server with the font files is different from the files with the type, it won't load without an Allow Origin header.

• Do you need to load this same font definition in other non-webkit browsers? If not, consider removing all the files except the .woff.

• Are you sure the issue is the font-face? Try setting the font declaration to a non-default system font (such as 'serif'). See if the font declaration is being applied, or could it be that your font-face is fine, but the css is somehow not applying the font to the type? (As has been my case this past week)

It's a bit hard to know without additional information. Your @font-face declaration, other than the weirdness of the first src being a .woff, seems like it should work fine. My guess is the issue lies elsewhere, not with that code fragment.

Edit:

I tracked down my issue --- on Android 4.2.1 the CSS option text-rendering: was behaving quite differently from Chrome and previous Android versions. If you are using this option, see if changing or removing it fixes the issue for you. It's the only thing I can think of that I've seen as being different in how Android 4.0 vs Android 4.2 webkit has been rendering fonts.