Material-design-icons: 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.