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

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.