Search code examples
cssfont-face

Font will not load on any version of Internet Explorer

I have two fonts that I wanted to include on my website for my logo, Bebas Neue Regular and Bebas Neue Thin.

I converted my fonts using font-squirrels online font conversion tool and have added the relevant @font-face code to my css:

@font-face { 
     font-family: BebasNeueReg; 
     src: url("/fonts/BebasNeueRegular.eot"); 
     src: url("/fonts/BebasNeueRegular.eot?#iefix") format('embedded-opentype'), 
     url("/fonts/BebasNeueRegular.woff2") format('woff2'), 
     url("/fonts/BebasNeueRegular.woff") format('woff'), 
     url("/fonts/BebasNeueRegular.ttf") format('truetype'), 
     url("/fonts/BebasNeueRegular.svg") format('svg'); 
}

As you can see this is the @font-face css for the Bebas Neue Regular. For some strange reason the css @font-face for Bebas Neue Thin works absolutely fine in all browsers. This css is exactly the same apart from the src being different.

@font-face { 
   font-family: BebasNeueThin; 
   src: url("/fonts/BebasNeueThin.eot"); 
   src: url("/fonts/BebasNeueThin.eot?#iefix") format('embedded-opentype'), 
   url("/fonts/BebasNeueThin.woff2") format('woff2'), 
   url("/fonts/BebasNeueThin.woff") format('woff'), 
   url("/fonts/BebasNeueThin.ttf") format('truetype'), 
   url("/fonts/BebasNeueThin.svg") format('svg'); 
}

I have tried multiple things such as, converting the font using different font conversion tool, swapping the order around of the url's.

Can anyone shed some light? Has anyone has this exact same problem before?

Thanks in advance.

Solution

  • I cleared everything and started again. Downloaded the fonts I wanted to be part of the project and then converted them to web fonts using the web font generator. I then added them back into the project and used the exact CSS @font-face that came in the zip file. This seems to have fixed things. May have been a corrupted open type font that I was trying to convert in the first place.