@Font-Face Ie9 Font-Weight Doesn't Work

@font-face IE9 font-weight doesn't work

IE doesn't support using a different font-weight than was specified in a @font-face rule.

A set of font files for each font variant

Typically, an embedded font file contains a version of the font with only one weight and one style. When multiple font variants are needed, a different set of embedded font files is used for each font variant. In the example below, only the .woff format is used, to simplify things. In practice, .eot, .ttf, and .svg will typically be used as well.

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
    font-weight: normal;
}
@font-face {
    font-family: 'myFont';
    src: url('myFontBold.woff');
    font-weight: bold;
}
...
p {
    font-family: myFont;
    font-weight: normal;
}
h2 {
    font-family: myFont;
    font-weight: bold;
}

Supporting IE8

However, IE8 has display issues when more than 1 weight, or more than 4 weights or styles, is associated with a font-family. To support IE8, use a different font-family for each font variant.

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.woff');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

Maximum cross-browser support

For the optimal amount of cross-browser support, use the following syntax:

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix')
             format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.eot');
    src: url('myFontBold.eot?#iefix')
             format('embedded-opentype'),
         url('myFontBold.woff') format('woff'),
         url('myFontBold.ttf') format('truetype'),
         url('myFontBold.svg#svgFontName') format('svg');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

font-weight: bold with @font-face not working in IE9

IE doesn't support using a different font-weight than was specified in a @font-face rule.

You can read more about this here: @font-face IE9 font-weight doesn't work

CSS @font-face does not work with multiple font weights

It appears there is an error in your CSS syntax, causing some of the fonts to not be loaded.

To fix the syntax, use a semicolon on the second line of the second src value.

@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
    font-weight: 600;
}

IE9 not recognizing font-weight: lighter

This appears to be a problem with this specific font, or with the way Google makes IE use it. Your code works for other Google fonts with Book (300) font weight, like Lato and Open Sans.

How to use font-weight with font-face fonts?

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Even bulletproof @font-face not working in IE9 (wordpress site on Apache)

I had the same problem, and I confirmed that it was the IE security zone settings. Some enterprises have group policies that disable font download for certain IE security zones.

The 4 typical zones are:

1. Intranet zone – sites on your local network.
2. Trusted Sites zone – sites that have been added to your trusted sites.
3. Internet zone – sites that are on the Internet.
4. Restricted Sites zone – sites that have been specifically added to your restricted sites.

To check the zone your page is on in IE9, right click on the page, then select properties. You should see a row with the "Zone" information.

The solutions:

1. Read up on your enterprise IE's Security Zones or talk to the group that manages your browser settings.
   
   1. Submit request to add your site into the intranet or trusted zones, if those are the ones that allow font download.
   2. Some policies just need you to use certain domain naming conventions to be in the Intranet zone.
2. Manually change IE settings for your box to allow you to develop and test things.
   
   1. If you have access, IE > Internet Options > Security Tabs > add specific sites to a zone that allows font download.
   2. If the Security tab is blocked, get temporary admin access, open "gpedit.msc", then drill down to Computer Configuration > Administrative Templates > Windows Components > Internet Explorer > Internet Control Panel > Security Page > double click "Site to Zone Assignment list" > enable it, and add your domain name in the "Value name" column and the security zone number in the "value" column. The zone numbers are listed above respectively (e.g. 1 for Intranet zone)

---

Related Topics