Custom Fonts in Internet Explorer

[garrensilverwing]

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:

@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]

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!

 

[garrensilverwing]

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]

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.

<!--[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/

 

[garrensilverwing]

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]

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]

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

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

ie-only.css

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

main.css

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

 

[farscapeone]

Try this: http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

 

[garrensilverwing]

Try this: http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

sweet leviathon it worked! finally jeeeeez I'm going to book mark the bajeezus out of that page.

 

[kbjradmin]

awesome @leviathon, i will have to bookmark that