@font-face not working on a client site?

Question

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?

Answer 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 rule 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.

Answer 2

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

Answer 3

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!