cannot download material design light icon font in android browser

[AllanRevenig]

Using this reference CDN , the icon font does not render in the Android browser on a Samsung Note 4 with Android OS v5.1.1. This works fine with the Chrome browser on the same device.

Android browser pulls this file: https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf Chrome browser pulls this file: https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2

Is anyone aware of this or know what might be happening?

[kamrenz]

What was the CDN reference?

[AllanRevenig]

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

[kamrenz]

When I hit that url this is what I get back on Safari (which also renders .ttf). What does it serve up for you on your Android device?

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[AllanRevenig]

This is what is returned when run on the Android browser on the Samsung.

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

[jestelle]

Google Fonts serves the best possible font format supported by your browser, which is why you see Chrome getting the woff2, but the Android browser (and Safari) getting ttf.

Now it's possible the logic we have for that Android browser... which I think is actually the Samsung browser, is it not? Called 'Internet' on the device? It's possible we're not giving that browser the best possible thing.

Also, have you tried using the numerical code point:  vs. the ligature to render the icon?

It's possible that browser doesn't support ligatures, or we're not specifying the right CSS to make them work.

We'll dig into this a bit, and if you can provide us any more detail, that'd be great to help us find the problem.

Cheers! Josh

[AllanRevenig]

Hi Josh,

You are correct, the browser in question is the Samsung "Internet" browser. Chrome works with the ligature as I stated earlier.

After trying your suggestion, I found that using the numerical code works:

<i class="material-icons" md-36" id="menu">&#xE5D2;</i>

whereas, using the ligature does not:

<!--<i class="material-icons md-36" id="menu">menu</i>-->

Thank you for the suggestion. I guess it is good to know more specifically what is the limitation. What then would be your plan going forward with this ?

Thank you for the response. Allan

[rlasch]

Is there any movement on this? I just changed all of our icons to use the numerical code, but would ideally like to change them back just from a readability standpoint.

[tphinney]

I know this is an ancient issue. Quite possibly it has been resolved with newer Samsung/Android browser versions? If anybody is still around/interested and could comment on whether this is still an issue, that would be great.

As far as I know, we were (and certainly are now) using the OpenType 'rlig' (required ligatures) layout feature to trigger the ligature. It is supposed to be on by default in text processing, according to the OpenType spec. I am pretty sure there is little else we can do on the font end to help with that.

BUT, I would not be surprised if there might be something else one could do in the code the browser sees. The obvious thing would be explicitly turning on the OpenType 'rlig' feature via font-feature-settings in your CSS. See for example https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide A more indirect/crazy option would be tagging the text as Arabic or some other language that might encourage 'rlig' processing.