IE 10 not loading fonts

Question

Link to site in question: http://qbtei.com/nationalretail/public

In my fonts.css i am loading a bunch of fonts like so:

@font-face {
    font-family: GothamBook;
src: url('../fonts/Gotham-Book.otf');
src: url( ../fonts/Gotham-Book.otf ); /* IE */
    }

@font-face {
    font-family: GothamBookItalic;
src: url('../fonts/gothambookitalic.otf');
src: url( ../fonts/gothambookitalic.otf ); /* IE */
    }

@font-face {
    font-family: GothamBold;
    src: url('../fonts/gothambold.otf');
    src: url( ../fonts/gothambold.otf ); /* IE */
}

in Firefox/chrome these fonts work no problem, but in IE 10 when i inspect element this css file appears as empty and the fonts are not loaded

I have tried using http://www.fontsquirrel.com/tools/webfont-generator to create a new font css sheet which looked like this, but this ended up not working in either firefox, chrome, or Internet Explorer

@font-face {
    font-family: 'gotham_boldregular';
    src: url('gothambold-webfont.eot');
    src: url('gothambold-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothambold-webfont.woff') format('woff'),
         url('gothambold-webfont.ttf') format('truetype'),
         url('gothambold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

I use my fonts in the css like this :

.nav-text{
    font-family: GothamLight;
    font-size: 21px;
    color: #d9e3e9;
    font-weight: 100;
    position: absolute;
  right: 28px;
  top: 13px;
}

Solution 1

This cannot work, as all versions of IE do not support the .otf font format - see: https://caniuse.com/ttf

Try the following method:

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

Are the path settings correct in your version generated with fontsquirrel's webfont generator? Also the font-family name looks wrong. I guess it should be "GothamBold".

And also keep the appropriate font licence in mind ...! ;-)

In your CSS file when using the fonts, you should at least add a generic font-family like so:

font-family: GothamLight, "sans-serif";

or additionally an alternativ font (which might be available on each plattform)

font-family: GothamLight, Arial, Helevetica, "sans-serif";

Solution 2

you have wrong path reference, in this code

@font-face {
    font-family: 'gotham_boldregular';
    src: url('gothambold-webfont.eot');
    src: url('gothambold-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothambold-webfont.woff') format('woff'),
         url('gothambold-webfont.ttf') format('truetype'),
         url('gothambold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

as i understood all fonts are placed under fonts folder. if this is not working.

Try fixing these things

1. Remove _ or - from font files and font name references

2. Place it on webserver or localhost webserver to test.

3. Bullet proof syntax, you have already done that.

4. Check all fonts are not 0KB

5. Try converting font ttf to otf and then convert to eot.

Still not working then your cannot be converted to webfont.

Solution 3

You are loading the fonts stylesheet before the style.css which actually uses them:

<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" />

simply load fonts.css first, and then style.css.

Solution 4

After a lot of digging, I found another reason why IE fails to load fonts:
The Response header may not contain Pragma: no-cache Cache-Control: no-cache
see also @font-face EOT not loading over HTTPS

Solution 5

A font generator is best solution for this. I am using Font Squirrel.

1. Download your font and save to the local system.

2. Go to Font Squirrel site. And click Add Fonts button to browse your font from your local system.

3. After browsing, download your webfonts from fontsquirrel.

4. Extract the zip file. There is your generated fonts with a demo file.

5. You can follow that demo file.

6. Please give correct url for your file. This is very important.

View more solutions

Comments

[worldofjr]

This does not solve the problem in the question. Please attempt to solve the issue that the OP has asked about, and not give an answer about a related question that hasn't been asked.