Custom Fonts in Internet Explorer

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by garrensilverwing, Mar 26, 2010.

  1. garrensilverwing

    garrensilverwing New Member

    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!
  2. kbjradmin

    kbjradmin New Member

    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: Mar 26, 2010
  3. garrensilverwing

    garrensilverwing New Member

    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... :(
  4. kbjradmin

    kbjradmin New Member

    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: Mar 26, 2010
  5. garrensilverwing

    garrensilverwing New Member

    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...
  6. xav0989

    xav0989 Community Public Relation Community Support

    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?
  7. kbjradmin

    kbjradmin New Member

    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');
    }
    
  8. farscapeone

    farscapeone Community Advocate Community Support

    Last edited: Mar 28, 2010
    • Like Like x 1
  9. garrensilverwing

    garrensilverwing New Member

    Last edited: Mar 28, 2010
  10. kbjradmin

    kbjradmin New Member

    awesome @leviathon, i will have to bookmark that :)

Share This Page