Solved

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

Posted on 2011-02-28
3
1,914 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 500 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 45
Kill default webkit margin!  Please! 6 31
To remove highlight from a "a href" 5 30
How to position loader with CSS 3 37
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

776 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