Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-02-28
3
Medium Priority
?
2,000 Views
Last Modified: 2012-05-11
This is my first time trying to use @font-face. Here is my home page:

http://www.genspangroup.com/v3/default.asp

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!
0
Comment
Question by:bbdesign
  • 2
3 Comments
 
LVL 14

Accepted Solution

by:
R-Byter earned 2000 total points
ID: 35002568
You need to reference IE version first. Look at this page, its cross browser compatible solution.

http://randsco.com/index.php/2009/07/04/p680

Regards
0
 

Author Comment

by:bbdesign
ID: 35008876
Got it, thank you. Seems to be working now, just had the syntax a little off.
0
 
LVL 14

Expert Comment

by:R-Byter
ID: 35009958
You're welcome and thanks for the points.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question