Andrew Font Andrew Font - 1 year ago 103
CSS Question

IE 10 not loading fonts

Link to site in question:

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 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 :

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

Answer Source

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

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