• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2050
  • Last Modified:

Using @font-face with EOT fonts in Internet Explorer, not loading/displaying correctly

This is my first time trying to use @font-face. Here is my home page:


Fonts work fine in Safari, Chrome and Firefox. They don't display in Internet Explorer. I made EOT versions of my fonts, and thought that I coded the CSS correctly:

@font-face {
            font-family: Gotham Book;
            src: url('http://www.genspangroup.com/v3/fonts/GothamHTF-Book.otf'),
            url('http://www.genspangroup.com/v3/fonts/gothamhtf-book-webfont.eot') format("opentype"); /* IE */
@font-face {
            font-family: Gotham Bold;
            src: url('http://www.genspangroup.com/v3/fonts/GothamHTF-Bold.otf'),
            url('http://www.genspangroup.com/v3/fonts/gothamhtf-bold-webfont.eot') format("opentype"); /* IE */

Is something not right? Thank you!
Brad Bansner
Brad Bansner
  • 2
1 Solution
You need to reference IE version first. Look at this page, its cross browser compatible solution.


Brad BansnerWeb DeveloperAuthor Commented:
Got it, thank you. Seems to be working now, just had the syntax a little off.
You're welcome and thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now