Does the Android 4.3 Internet browser not support @font-face declarations?

Question

Does the Android 4.3 Internet browser not support @font-face declarations?

After my Samsung Galaxy S3 phone recently updated from Android 4.1.3 to Android 4.3, I noticed that some of the websites I designed are not displaying the fonts correctly. These sites were tested on the Android internet browser and use @font-face. How can I go about fixing this issue?

One of the affected sites (development version):

Below is a snippet of the CSS code related to Open Sans font:

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

I have similar declarations for all the fonts used on the website. The issue seems to only occur in the Android Internet browser, as other browsers like Chrome for Android and Firefox for Android display the fonts correctly.

I'm volunteering on this project and need to resolve the CSS problem quickly, so I'm hoping for a straightforward solution rather than a detailed code review. As a UX designer, not a web developer, any assistance would be greatly appreciated. Thank you!

Edit: Today, I tried debugging with Edge Inspect CC and weinre by connecting my Android phone and iPad to my laptop. Interestingly, I was able to change font families on the iPad but not on the phone using Weinre. Font colors, however, could be changed on both devices. It appears that the underlying issue might be related to the limitations of changing fonts when using a remote debugger.

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

Answer 1

Answer №1

I encountered the same problem and found a solution.

To address this issue, I utilized SVG exclusively on mobile devices through 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;
    }
}

I hope this information proves helpful to you as well.

Answer 2

I encountered the same problem and found a solution.

To address this issue, I utilized SVG exclusively on mobile devices through 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;
    }
}

I hope this information proves helpful to you as well.

Answer 3

Answer №2

Encountering a familiar problem, we discovered that our font display issues were linked to the

text-rendering: optimizeLegibility

property in our CSS. Removing this resolved the issue and restored proper font functionality on version 4.3.

Answer 4

Encountering a familiar problem, we discovered that our font display issues were linked to the

text-rendering: optimizeLegibility

property in our CSS. Removing this resolved the issue and restored proper font functionality on version 4.3.

Answer 5

Answer №3

Experimenting with creating a jsfiddle using only svg and woff fonts, I tested it on my Android 4.3 device in the default browser and everything worked perfectly.

I streamlined the fonts for mobile by removing unnecessary ones. All mobile browsers support svg fonts, while Firefox and IE10 require woff. Using media queries, you can define separate font-face styles for mobile and desktop users.

If you require multiple font types, make sure to check the Content-Type header for font files. It is often incorrectly set as text/plain:

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

For troubleshooting common issues with font face, refer to this page.

Answer 6

Experimenting with creating a jsfiddle using only svg and woff fonts, I tested it on my Android 4.3 device in the default browser and everything worked perfectly.

I streamlined the fonts for mobile by removing unnecessary ones. All mobile browsers support svg fonts, while Firefox and IE10 require woff. Using media queries, you can define separate font-face styles for mobile and desktop users.

If you require multiple font types, make sure to check the Content-Type header for font files. It is often incorrectly set as text/plain:

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

For troubleshooting common issues with font face, refer to this page.

Answer 7

Answer №4

Dealing with a similar issue in the past, I managed to resolve it by including font-weight: normal !important; for the specified elements/text using the font. It seemed that the problem arose from the font weight being inherited by the elements, leading to font failure. Hopefully, this solution will work for you as well :)

In your code snippet:

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

Answer 8

Dealing with a similar issue in the past, I managed to resolve it by including font-weight: normal !important; for the specified elements/text using the font. It seemed that the problem arose from the font weight being inherited by the elements, leading to font failure. Hopefully, this solution will work for you as well :)

In your code snippet:

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

Answer 9

Answer №5

One option is to consider Beacouron's approach using a media query that targets mobile devices, although this could pose challenges when dealing with multiple Android tablet screen resolutions.

Alternatively, you could try targeting webkit browsers specifically with a media query like this:

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

One option is to consider Beacouron's approach using a media query that targets mobile devices, although this could pose challenges when dealing with multiple Android tablet screen resolutions.

Alternatively, you could try targeting webkit browsers specifically with a media query like this:

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

Does the Android 4.3 Internet browser not support @font-face declarations?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to arrange three identical boxes next to each other, all of the same size

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

What is the most effective way to implement a single modal throughout my web application without having to duplicate HTML code on each page?

Dynamic height of a fixed-positioned Div

List-group item in Bootstrap 4 featuring an arrow on the right side

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Tips for converting an entire column along the vertical axis to a different language

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

What are some ways to implement smooth scrolling when a navigation link is clicked?

Struggling with applying mixins

Move your cursor over a specific element to change the div located before it, rather than the one after

How can we create a flexible item that can be resized along with another item set to a fixed length?

access various paths to distinct iframes

How can I assign a class to my Typography component in Material UI?

Customize the appearance of the date input box in MUI KeyboardDatePicker

What new skills should I acquire following my mastery of HTML and CSS?

Conceal/reveal specific sections of a table cell using jQuery

The art of replacing material-ui styles with styled components

CSS unable to modify the color of the switch in HTML code

"Troubleshooting: Why Won't My Entire Div Display on the