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;
}

Answer 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";

Answer 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.