5

This is CSS code

@font-face {
    font-family: 'FuturaStdBook';
    src: url('site/font-face/futurastd-medium-webfont.eot');
    src: local('☺'), url('site/font-face/futurastd-medium-webfont.woff') format('woff'), url('site/font-face/futurastd-medium-webfont.ttf') format('truetype'), url('site/font-face/futurastd-medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2 {font-family:'FuturaStdBook', sans-serif}

Can it be related to mime type?

How can i ensure my path is right?

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • What MIME type does get served? What browser on what OS? – Pekka Apr 26 '10 at 15:01
  • do we have to have mime type support for all font file extensions. – Jitendra Vyas Apr 26 '10 at 15:06
  • Are you sure, that on the client machines there is no font installed named '`☺`'? Sorry, couldn't resist. – Boldewyn Apr 26 '10 at 15:11
  • It almost certainly is no MIME type related problem, mainly because there *are no* registered mime types for any font format. That's the main reason for the `format('')` thingy in the CSS spec. – Boldewyn Apr 26 '10 at 16:21

3 Answers3

17

If you're using IIS, you'll need to register a MIME type for the .eot extension.

  1. In IIS Manager, in the IIS section, open the MIME Types configuration
  2. Under "Actions", click "Add..."
  3. Enter .otf in the extension box, and application/octet-stream in the MIME type box.
  4. Click OK

You'll need to do this for each non-standard extension you use (.ttf is already registered, .woff is not), but that should do it!

Daniel Schaffer
  • 56,753
  • 31
  • 116
  • 165
2

Try using Font Squirrel to get a bullet-proof CSS declaration for your custom font.

Tim Hettler
  • 1,246
  • 9
  • 12
1

The problem are the definitions of font-weight and font-style in your font-face declaration. Since h2 elements are defined in a bold face by default, the font-face declaration is not taken into account for these elements (because the browser thinks, the font file is for normal weighted weight only, which is most probably true).

Solution: You need a second font-face declaration with font-weight: bold in it or you set h2 elements to have font-weight:normal and font-style: normal.

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
  • still not working. How can i confirm path is correct and font-face is loading properly , problem is something else? – Jitendra Vyas Apr 26 '10 at 15:34
  • 2
    Do you use Firebug? If yes, in the "network" tab, is the font ever downloaded? Is it the right URL? – Boldewyn Apr 26 '10 at 16:17
  • 1
    ...and what are the response headers? You could update your question accordingly to help finding answers. – Boldewyn Apr 26 '10 at 16:19
  • @Boldwyn - how to know using firebug net tab , font is downloading or not? – Jitendra Vyas Apr 27 '10 at 04:39
  • No info about font in response headers – Jitendra Vyas Apr 27 '10 at 04:41
  • "Since h2 elements are defined in a bold face by default, the font-face rule is not taken into account for these elements" ... this is not true at all. Any rule defined with a more specific selector (or same specificity, but defined after the original) will override any "default" rules. "default" rules are just stylesheets themselves that are shipped with the browser. This still counts even if the overriding rule is setting the same style. Styles do not get ignored because they're the same as another style though. – Daniel Schaffer Mar 01 '16 at 00:52
  • @DanielSchaffer apart from my 6 years younger self mixing up "rule" and "declaration", what do you want to tell me here? If he sets `font-family` on his `h2`, the computed `font-weight` is still `bold` in _all browsers_. A `@font-face`, that defines its font as `font-weight: normal` will subsequently get ignored in all compliant browsers. And this is exactly, what I state in my answer. – Boldewyn Mar 01 '16 at 08:11
  • Oy, I need to stop commenting on SO after wine. Sorry, carry on. – Daniel Schaffer Mar 01 '16 at 15:43
  • Nah, commenting is fine. But if it starts with "this is not true at all", you'll likely get some hefty response compared to "help me spot the error, but I think..." ☺ – Boldewyn Mar 01 '16 at 16:20