css font-family doesnt work on internet explorer

Question

CMS: Magento community (I dont think this is importat).

I'm using a font that I loaded on fontsquirrel. On firefox it looks great but on internet explorer (11) this font works only with some element without a logic.

This is an example page: http://www.prodottipet.simply-webspace.it/index.php/roditori.html "Cani - Roditori - Gatti - Pesci - Uccelli" on menu is an example of this.

1) If the font is not correclty loaded why some element use this font? SO i dont think this is the problem.

@font-face {
font-family: 'indy';
src: url('w/indiepimptbs-webfont.eot');
src: url('w/indiepimptbs-webfont.eot?#iefix') format('embedded-opentype'),
     url('w/indiepimptbs-webfont.woff2') format('woff2'),
     url('w/indiepimptbs-webfont.woff') format('woff'),
     url('w/indiepimptbs-webfont.ttf') format('truetype'),
     url('w/indiepimptbs-webfont.svg#indy_pimpregular') format('svg');

font-weight: normal;
font-style: normal;
}

Answer 1

Check your html, you have there embedded styles with font-family:, serif !important, which is not valid and I guess is ignored by browsers other than IE 11. Just remove it.

You can track css inheritance by running IE Inspector (F12). There you will see:

Embedded/internal css has priority over external stylesheet.