Segoe UI Light Font Not displaying properly in Google Chrome

Question

I am using Segoe UI Light font in my website.

the css used is as follows.

.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter; 
width:100%
}

But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.

The Image.

The versions of browsers i'm using.

Internet Explorer : 9

Mozilla Firefox : 21

Google Chrome : 27

Answer 1

Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.

 font-family: "Segoe UI Light","Segoe UI";
 font-weight: 300;

See Here This is from a HTML5 solution, but it might help you too, as it's also in Visual Studio... Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.) 100: Thin 200: Extra Light (Ultra Light) 300: Light 400: Normal 500: Medium 600: Semi Bold (Demi Bold) 700: Bold 800: Extra Bold Hope it helps.

Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of 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");
}

Answer 2

Could be because of various reasons:

1. Perhaps you are using the wrong font format. Chrome supports SVG, WOFF, TTF/OFT.
2. Taken the a wrong approach towards defining font-weight, which leads the browser to interpret the font-weight property wrongly

Sample: http://pastebin.com/FiGvAfTk

Are you defining your fonts properly?