Custom Fonts in Internet Explorer

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
Hey guys I'm working on a site for a friend of mine and he has a brand set up for his company. This brand has its own font and I'm trying to get it to work on the website. I got it to work with every browser except for internet explorer. I searched with google and couldn't get anything that worked.
Here is my CSS code:
Code:
@font-face {
    src: url(../fonts/font1.eot);
    font-family: font1;
    src: local("font1"), url( ../fonts/font1.ttf ) format("truetype");
}

I ran it through a validation service and it said it was all screwed up. Can anyone give me a definitive answer on how to get the custom fonts to work? I have both .ttf files and .eot files.

Thanks again!
 

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
first, your code there is valid CSS3.

second, what version of IE are you using? as far as i'm aware, older versions of IE do not support custom fonts at all. (although i'm not sure on that).

edit:
woot! 500th post!
 
Last edited:

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
I thought IE was supporting custom fonts since 5.5. I am trying to get it to work with IE7 and 8. It works with everything else... :(
 

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
i've done some looking around, and from what i can tell, the best way to do it is to use conditional comments to do the IE part. eg.

HTML:
<!--[if IE]>
<style type="text/css" media="all">
@font-face {
  font-family: Bleeding Cowboys;
  font-style:  normal;
  font-weight: normal;
  src: url('BLEEDIN0.eot') !important;
}
</style>
<![endif]-->
<style type="text/css" media="all">
@font-face {
  font-family: Bleeding Cowboys;
  font-style:  normal;
  font-weight: normal;
  src: url('Bleeding_Cowboys.ttf');
}
</style>
taken from: http://nickcowie.com/2008/font-face/
 
Last edited:

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
That's not working for me either maybe its because I am trying to use it in my style sheet. If I have to I can try putting in my html documents but I don't really want all that extra code running around...
 

xav0989

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
I read an article on FF's blog about it... but I can't remember when and where. M$ why did you have to make those things some complicated?
 

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
if you want to cut back on the code in your html document, you could put a lot of that in an external file like this

index.html
HTML:
<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css" />
<![endif]-->
<link rel="stylesheet" href="main.css" />

ie-only.css
Code:
@font-face {
  font-family: Bleeding Cowboys;
  font-style:  normal;
  font-weight: normal;
  src: url('BLEEDIN0.eot') !important;
}

main.css
Code:
@font-face {
  font-family: Bleeding Cowboys;
  font-style:  normal;
  font-weight: normal;
  src: url('Bleeding_Cowboys.ttf');
}
 
Top