Segoe UI Semilight in CSS not working on Chrome

Question

I'm trying to use Segoe UI Light, Segoe UI Semilight, and Segoe UI on a web page. It renders great in IE, but Chrome doesn't seem to differentiate between Light and Semilight.

I'm using the CSS suggested on this StackOverflow answer, as suggested by Microsoft.

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

The following jsfiddle shows various font weights of Segoe UI, including Light and Semilight: http://jsfiddle.net/nHXDA/

Here's the results.

Chrome:

IE:

Any ideas on how to fix this?

Answer 1

Beside the fact that your font will only be displayed on Windows Devices correctly while it will be ignored on all others that don't have the font installed you need to make sure you have a matching fallback in place.

The second thing is that your font definition is wrong and doesn't work cross browser. While Internet Explorer is able to use directly the correct font file, specified by src: local("Segoe UI Semibold"); all other browser need to refer to the font family. src: local("Segoe UI");.

In case of semibold you need to specify the font definition like this:

@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight"), local("Segoe UI");
}

Once you fixed your font definition it should look like the following screenshot shows. In those Screenshots you also see that if the font-family is specified with the full name instead of the font family name the font will fallback to Times New Roman. This happens because the browser cannot resolve the font name, which seems to be exclusive for IE.

Not sure if it is because I use the local font and if the available web font have been fixed you need to make additional adjustments to look the font good. It might be the case that the web fonts has special hinted for web use.