Icon fonts : some icon display as text instead on my machine

Question

This is an issue about how my machine sees the web, not a personal web project. On my machine, some icon fonts display as literal text (the name of the icon) instead of the graphic icon itself.

Environnement

• MacBook Pro (Retina, 13-inch, Early 2015)
• MacOS Sierra 10.12.3
• Happening using Chrome, Safari and Firefox browsers in their latest versions

Also

• I use a decent internet connexion and the font file does not fail to load
• I do not use a proxy and do not live in China
• The problem still happens when disabling all the browser extensions.
• EDIT : I have no error/warning at all in the browser console.

For example, this is how I see https://developers.google.com/web/

and https://material.io/icons/

Any help appreciated

Answer 1

The webpages OP has shown uses the Material Icons font via Google Web Fonts. They serve a CSS file like:

@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/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  ...
}

It will always try to load the local version of "Material Icons" font first, before the web font. Therefore, if OP has an outdated or customized version of "Material Icons", the desired effect won't be shown.

To fix this, delete the local "Material Icons" font, or replace it with the latest version if you still want a local copy.