Link to the website in question:
In my fonts.css file, I am loading multiple fonts as shown below:
@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 */
}
These fonts display correctly in Firefox and Chrome, but in Internet Explorer 10, when inspecting the element, the CSS file appears empty and the fonts do not load.
I attempted using to generate a new font CSS sheet which looked like this, but unfortunately it did not work in any of the browsers (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 reference these fonts in the CSS like so :
.nav-text{
font-family: GothamLight;
font-size: 21px;
color: #d9e3e9;
font-weight: 100;
position: absolute;
right: 28px;
top: 13px;
}