@font-face declarations don't work in Android

Question

My Samsung Galaxy S3 phone recently upgraded from Android 4.1.3 to Android 4.3. Now several websites I designed which I tested in the Android internet browser are not displaying fonts I have declared with @font-face. What do I need to do to fix this?

One of the sites (development version): http://beta.kdfansite.com

Here is some of the related CSS for Open Sans:

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... */

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    /* ... */
}

Each font I use on the site is declared in a similar way. The Great Vibes declaration (also in custom.css) for the "enjoy your ride" message is another one to compare. All fonts display properly in Chrome for Android and Firefox for Android on the same device, but not in Android Internet.

I need to finalize this CSS as soon as possible and am working on this project as a volunteer (not paid). So I am looking for a quick fix rather than a code review. I'm also a UX designer, not a web developer. Thanks in advance.

Edit: I did some additional debugging today in Edge Inspect CC and weinre, connecting both my Android phone and my iPad to my laptop. In Weinre, I am able to change the font families on the iPad but not on the phone. I can change the font colors on both devices. So it appears the underlying issue is related to the fact that I can't change the fonts off of the defaults when I use a remote debugger.

Answer 1

I had a similar problem before and I solved it by adding font-weight: normal !important;to the elements/text that was using the font. I believe the problem was that the font weight was being inherited by the elements and this caused the font to fail. Hope it works :)

So in your code:

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}

Answer 2

I have the same issue here how i solve it.

I only use svg on mobile with media queries.

@media only screen and (max-width: 320px) {
@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Hope it's help you.

Answer 3

You could also maybe use Beacouron's solution of the media query targeting mobile, but this may be difficult if you have various Android tablet resolutions to target to.

Another idea maybe to use a media-query targetting webkit browsers like so:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Answer 4

I create jsfiddle with only svg and woff fonts and test it on my Android 4.3 device in default browser. All works.

I just remove all unnecessary fonts for mobile. All mobile supports svg fonts, FF and IE10 needs woff. So you can use media queries for separate font-face defenition: for mobile and for desktop.

If you need all types of fonts check your Content-Type header for font files, it's always text/plain which is wrong:

• eot has application/vnd.ms-fontobject type
• otf and ttf have application/octet-stream type
• woff has application/font-woff type
• svg has image/svg+xml type

Also check this page to read known common problems with font face.

Answer 5

As of 2017, one can use the @import query provided by fonts.google.com for the font you like. Just search for the desired font(s), select it, then in the minimized bar at the bottom of the screen, you'll have to pick @import in the 'embed' section. I've attached a screenshot for reference: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

I've had the same problem in the mobile's default browser, but after I used that syntax, problem was solved. Don't know why, but it worked.

Answer 6

We were running into a similar issue, and it was caused by our use of text-rendering: optimizeLegibility - removing that from our CSS made our fonts start working on 4.3 again.