1

@font-face{ font-family: gotham; src: url('../fonts/Gotham-Light.otf'); } I have included font named as Gotham in my css file.Its working in mozilla and all other browsers but not in IE9.

ramshinde1992
  • 136
  • 7
  • Your question is not very informative.... Is your issue related to http://stackoverflow.com/questions/5587956/make-adobe-fonts-work-with-css3-font-face-in-ie9 ? – fvu Aug 07 '12 at 09:40
  • @font-face requires several different font formats (as supported by different browsers) ; you can use http://www.fontsquirrel.com/fontface/generator for instance to generate the different files. – darma Aug 07 '12 at 09:41
  • @ramshinde1992: See my answer below for details. – Ahsan Khurshid Aug 07 '12 at 09:51

1 Answers1

2

See The New Bbulletproof Fontface Syntax

    @font-face {

        font-family: 'MyFontFamily';
        src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
             url('myfont-webfont.woff') format('woff'), 
             url('myfont-webfont.ttf')  format('truetype'),
             url('myfont-webfont.svg#svgFontName') format('svg');
    }

How it works?

Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single question mark. The question mark fools IE into thinking the rest of the string is a query string and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

Browser compatibility:

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

To generate your font-kit you should use fontsquirrel.

Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51