@font-face Not Working in Chrome for Android

问题:

I'm using an @font-face declaration to call a font on a website and it displays in IE, FF, Chrome, even Mobile Safari. However, the font is not displaying in Chrome 18.0.1025308 for Android (4.1.2).

The syntax I'm using is fontspring's bulletproof syntax, and I'm having a real problem determining what is preventing the font from displaying properly.

CSS:

@font-face {
    font-family: 'jump_startregular';
    src: url('wp-content/uploads/fonts/jstart-webfont.eot');
    src: url('wp-content/uploads/fonts/jstart-webfont.eot?#iefix') format('embedded-opentype'),
         url('wp-content/uploads/fonts/jstart-webfont.woff') format('woff'),
         url('wp-content/uploads/fonts/jstart-webfont.ttf') format('truetype'),
         url('wp-content/uploads/fonts/jstart-webfont.svg#jump_startregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

Any thoughts?

回答1:

The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:

font-family: fghjkjh, 'jump_startregular', sans-serif;

...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)

In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the @font-face block instead, which probably causes problems with other older browsers.