CSS @font-face not rendering icons in production (instead it shows only unicodes) works fine in local

Question

I am trying to render icons from the Icomon library in my Angular application. I'm suspecting it to be a problem of how my CSS files are included

withing the index.html page of icomon fonts we have

<link rel="stylesheet" href="style.css"></head>

within the style.css I have the following declarations:

@font-face {
  font-family: 'gtap-icons';
  src:  url('fonts/gtap-icons.eot?5cufps');
  src:  url('fonts/gtap-icons.eot?5cufps#iefix') format('embedded-opentype'),
    url('fonts/gtap-icons.ttf?5cufps') format('truetype'),
    url('fonts/gtap-icons.woff?5cufps') format('woff'),
    url('fonts/gtap-icons.svg?5cufps#gtap-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Icons contents are loaded as (for example)

.icon-ac_unit:before {
  content: "\e900";
}
.icon-access_alarms:before {
  content: "\e901";
}

My folder structure

Inside fonts folder I have eot, ttf, woff and SVG files.

In my local I can see the icons like:

But in production it looks like:

Note: I am using utf-8 charset and there are no errors/warning in console related to fonts

I can see that the font is downloaded properly

I am not sure exactly what is going wrong. Any help is much appreciated. Thank you!

Answer 1

My guess is that the font files are not actually being loaded. Check your server's MIME type settings to make sure it knows how to deliver each of those font file types.

If you open your browser devtools can you see if the font files are actually being downloaded correctly?

For example: