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

I am guessing you have this, but just to double check does your website contain a DOCTYPE? i.e. — Andrew, Sep 27 '13 at 18:57
Ok, that's what I thought. If you use the developer tools (F12 key) and change the browser mode to IE 8 or 9 will the images load? — Andrew, Sep 27 '13 at 19:02
thats odd if i run it in IE 10 compatibility mode some fonts load, but the rest of site explodes — Andrew Font, Sep 27 '13 at 19:09
no i don't think so the old developer put those in, i removed them and it still didnt work — Andrew Font, Sep 27 '13 at 19:25
Okay, you'll want the one that has the quotes in the url. Is the website on a a local copy, or is it on a server that I could go to? — Andrew, Sep 27 '13 at 19:28
If the *css file* looks empty, as you say, then the problem is surely in something that was not disclosed in the question. Problems with fonts cannot usually be solved without access to the real HTML and CSS code on a server, so that one can inspect what happens in network connections (e.g., whether a font file is loaded at all, what its headers are, and what its content is). — Jukka K. Korpela, Sep 27 '13 at 19:33
here is a link to the site hosted on a test server which i ahve been using http://qbtei.com/nationalretail/public/index.php — Andrew Font, Sep 27 '13 at 19:51
The name of your font declared in your second css (fontsquirrel) for font-face is 'gotham_boldregular' but in your css for .nav-text, you use the name 'GothamLight'. — service-paradis, Oct 01 '13 at 20:55
that was not the full font squrril file right now i am now using that in my css...the above gotham_boldregular was an excerpt of the file to show the formatt — Andrew Font, Oct 01 '13 at 21:02
The kind of font-face syntax generated by fontsquirrel is exactly what i use in every project that i need custom fonts. I never had problem I see in your first example that you use this path "../fonts/gothambookitalic.otf" to get your font. Have you placed fontsquirrel generated files in this directory also? If you also use this directory, have you changed the font-face css generated by fontsquirrel to match that url. e.g. "url('../fonts/gothambold-webfont.woff') format('woff')" instead of "url('gothambold-webfont.woff') format('woff')"? — service-paradis, Oct 01 '13 at 21:21

score 8 · Accepted Answer · edited Feb 04 '21 at 05:57

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

score 2 · Answer 2 · answered Oct 06 '13 at 17:41

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

Remove _ or - from font files and font name references
Place it on webserver or localhost webserver to test.
Bullet proof syntax, you have already done that.
Check all fonts are not 0KB
Try converting font ttf to otf and then convert to eot.

Still not working then your cannot be converted to webfont.

score 1 · Answer 3 · answered Oct 08 '13 at 15:11

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.

score 1 · Answer 4 · edited Jun 18 '22 at 16:13

1

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

Download your font and save to the local system.
Go to Font Squirrel site. And click Add Fonts button to browse your font from your local system.
After browsing, download your webfonts from fontsquirrel.
Extract the zip file. There is your generated fonts with a demo file.
You can follow that demo file.
Please give correct url for your file. This is very important.

edited Jun 18 '22 at 16:13

Laurel

5,965
14
31
57

answered Oct 09 '14 at 03:42

RAJA

144
4

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. – worldofjr Oct 09 '14 at 04:03

score 1 · Answer 5 · edited May 23 '17 at 12:22

1

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

edited May 23 '17 at 12:22

Community

1
1

answered Aug 02 '16 at 10:13

Jodi

73
1
7

score -1 · Answer 6 · edited May 23 '17 at 12:14

-1

I found a very good and helpful otf to woff converter

http://everythingfonts.com/otf-to-woff

Also another helpful post on SO here

Thanks all!

edited May 23 '17 at 12:14

Community

1
1

answered Apr 29 '14 at 18:56

Oliver M Grech

3,071
1
21
36

IE 10 not loading fonts

6 Answers6