CODEWITHSUNDEEP
androidcssgoogle-chromefontsfont-face
Marcatectura
Marcatectura

Reputation: 1695

@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?

Upvotes: 5

Views: 4295

Answers (1)

Josh Goodwin
Josh Goodwin

Reputation: 311

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.

Upvotes: 1

Related Questions