@font-face declarations don't work in Android 4.3 Internet browser?

Asked 2/1, 2014 at 19:38 Answered 23/5, 2014 at 8:21

Solved css cross-browser font-face android-4.3-jelly-bean android-internet

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.

Tattle answered 2/1, 2014 at 19:38 Comment(5)

and here I am wondering why my S3 is not getting that 4.3 android update – Caputto 2/1, 2014 at 19:51

Possible duplicate? Review this SO page: #16224271 – Helluva 2/1, 2014 at 19:52

@Helluva - I was thinking about that, but I have a different version of Android (4.3). This question's also specific to Android's default internet browser. Mine worked fine in Android 4.0 and 4.1, as well as Chrome/Firefox for Android. – Tattle 2/1, 2014 at 19:56

Fair enough. In regards to that post, was the SVG format also not working on yours? I ask only because when I tested your svg path, the location resulted in nothing happening...as opposed to the .ttf or .eot which prompts to download the file. – Helluva 2/1, 2014 at 19:57

I saw the same thing happen with the .svg file on several other sites (I tried Font Squirrel and several other designers' sites), but those sites were all displaying fonts properly on the Android browser. The only thing that seemed different was that those sites were using relative paths for their fonts, but when I made that change on my site the fonts were still displaying properly on my laptop and improperly on my phone. – Tattle 2/1, 2014 at 21:37

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.

Roll answered 10/1, 2014 at 17:2 Comment(4)

Thanks, and welcome! This is a big help. It works in all browsers I've tested: Chrome, Firefox, IE, and Safari for desktop; Safari and Chrome for iPad; Android Internet and Chrome for Android. The only browser I tested where it doesn't work is Firefox for Android. Do you know right off hand if there's a way to fix that without breaking it in other browsers? – Tattle 10/1, 2014 at 23:43

Also, since the bodies of the media queries are the same, writing the media query as @media only screen and (max-width: 320px), screen and (max-device-width: 720px) and (orientation:portrait), screen and (max-device-width: 1280px) and (orientation:landscape) would save code. That was a concern for me because my site uses multiple font-faces. – Tattle 11/1, 2014 at 2:50

You, sir, are an absolute legend!! Thank you very much!! – Kirchner 1/3, 2014 at 9:51

it works great but in Persian characters not sticking together – Argueta 30/11, 2014 at 6:38

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.

Pollitt answered 18/4, 2014 at 21:6 Comment(3)

This was the case as well on our project. Samsung Galaxy S3 running 4.3 with eot and woff font files. Thanks! – Micrometeorology 14/5, 2014 at 9:39

Confirmed on 4.3 using Galaxy S3. – Bound 15/7, 2014 at 10:40

Confirmed at 4.4.2 android, thanks a lot man, did not expect that – Pahang 4/11, 2015 at 12:23

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.

Centrosphere answered 5/1, 2014 at 21:32 Comment(13)

Does this still work for all major web browsers on desktop too? I don't want to fix the fonts for one type of device and break them for another, so I'll be testing for this today. – Tattle 6/1, 2014 at 13:12

The jsfiddle works for me, but when I made the changes in my CSS file and retested the site on my phone it did not work there. – Tattle 6/1, 2014 at 16:25

New changes are on your site beta.kdfansite.com now? – Centrosphere 7/1, 2014 at 11:5

The current version uses a fix that FontSquirrel recommended for me. They wanted me to try their version without absolute paths. The version in your jsfiddle didn't work for me with absolute or relative paths. I'm looking into the Content-Type headers now. – Tattle 7/1, 2014 at 15:35

I'm not sure how to change the Content-Type headers for fonts. It was not obvious from the site's HTML or CSS code. Where would I be able to do this? – Tattle 8/1, 2014 at 2:21

What web server do you use? – Centrosphere 8/1, 2014 at 18:15

The site uses a shared, standard Apache 2 server. Because it is shared, we don't have any control over it. – Tattle 9/1, 2014 at 0:54

Ok, let roll back to your problem and my jsfiddle. I tested my jsfiddle on S3(Android 4.1) and Zopo (Android 4.3) in default browser, all works. This jsfiddle works on your S3? P.S. My S3 can't update to Android 4.3. – Centrosphere 9/1, 2014 at 8:16

I tried it again, and it is working on Android 4.3 on my S3, Safari on iPad 2, IE, and Chrome on my PC. Here it is with a different (script) font so that it's easier to tell it works: jsfiddle.net/Rm56X. However, it doesn't work in Firefox. I only changed the "enjoy your ride" text in this screenshot: browshot.com/screenshot/image/5649362?scale=1. I'll keep investigating. – Tattle 9/1, 2014 at 16:38

In Firefox the problem is in Content-type, but FF supports base64 css fonts, so I converted your ttf file to base64 syntax and it works in FF. – Centrosphere 9/1, 2014 at 19:24

Thanks, that jsfiddle works on Android Internet as well as my other browsers. I was able to get the base64 encoding to work on Chrome+FF+IE+Safari on my PC and Chrome+FF on my phone, but Android Internet is again not working. It seemed like earlier we had a solution for Android Internet and a solution for other browsers. Should/Could I refactor my CSS into 2 separate fonts files (one for mobile, other for other browsers... decided by a media query? I'm not sure) and the existing custom.css? Is that the best way to solve this, given the constraints I need to work with? – Tattle 10/1, 2014 at 3:15

Can you detect Android on server side? – Centrosphere 10/1, 2014 at 5:11

I am guessing that we can't. Beauceron's answer works for both Android Internet and Firefox (desktop version). It's also an all-CSS solution, which is easier to coordinate with my client. Do you know of a way to add to / modify that and get Firefox for Android to work too? (If not, I am less concerned; it appears to have a much smaller market share currently than Android Internet, so most users as of this writing wouldn't see the bug.) – Tattle 11/1, 2014 at 0:52

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;
    /* ... */
}

Spokesman answered 6/1, 2014 at 14:8 Comment(4)

That didn't work for me on my Android 4.3 device. Can you post a link to a sample webpage that works with that fix? – Tattle 6/1, 2014 at 15:21

@Tattle Just verify that your TTF font is not corrupt. Some of the online font converters trash the fonts in the process of converting. – Spokesman 7/1, 2014 at 7:6

eot = IE9, eot?#iefix = IE6-IE8, woff = FF/Chrome, ttf = safari / android / ios, svg = legacy ios or if ttf fails – Spokesman 7/1, 2014 at 7:12

I am able to view the TTF fonts' characters in Windows Explorer when I open them. Is that the only thing I needed to check? – Tattle 7/1, 2014 at 15:28

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;
    }
}

Row answered 23/5, 2014 at 8:21 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags