Internet Explorer – fonts not loading

[John C]

Hi,

i am using the Neuropolitical font on my site but it’s not displaying properly in Internet Explorer. is there a fix for this?

Thank you,
John

[David]

Hi there,

have you installed the .eot file version of the font ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

yes i did actually – here is my CSS:
@font-face{
font-family: ‘Neuropolitical’;
font-style: normal;
font-weight:400;
src: url(‘https://therevrepublic.com/neuro.eot’);
src: url(‘https://therevrepublic.com/neuro.eot?#iefix’) format(’embedded-opentype’), url(‘https://therevrepublic.com/neuro.woff2’) format(‘woff2’), url(‘https://therevrepublic.com/neuro.woff’) format(‘woff’), url(‘https://therevrepublic.com/neuro.ttf’) format (‘truetype’), url(‘https://therevrepublic.com/neuro.svg’) format(‘svg’);
}

it only doesnt display properly in IE

[David]

Is it that the wrong font is being displayed ? Or is the correct font but it looks incorrect ?

If its the latter then you may want to check the original font files are not corrupted.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

No it’s the former

[David]

Can you repaste your @font-face code here – before submitting, please highlight the code and click the code button in the toolbar so i can see the formatting is correct.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

@font-face{
font-family: ‘Neuropolitical’;
font-style: normal;
font-weight:400;
src: url(‘https://therevrepublic.com/neuro.eot’);
src: url(‘https://therevrepublic.com/neuro.eot?#iefix’) format(’embedded-opentype’), url(‘https://therevrepublic.com/neuro.woff2’) format(‘woff2’), url(‘https://therevrepublic.com/neuro.woff’) format(‘woff’), url(‘https://therevrepublic.com/neuro.ttf’) format (‘truetype’), url(‘https://therevrepublic.com/neuro.svg’) format(‘svg’);
}

[David]

It might be the curly quotes.
Check in your theme CSS that you don’t have curly quotes ‘’ – make sure they are straight ''

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

i double checked and they are all straight.

[David]

If you right click and inspect the page in IE11 are there any errors in the console?
Sorry i can’t check as IE11 is forbidden on my current network.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

actually, yes:

**

[David]

None of them look font related.
In the Networks panel of the Developers console can you see if the font is being requested? You may have to clear the caches and reload to see if it is called.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John C]

yes i do

screenshot

[John C]

oh but i notice the console errors are very different now

screenshot

[David]

Found this article on the matter:

https://stackoverflow.com/a/14092444

Sounds like a bad conversion of the EOT font….

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts