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;         


        

Answer 1

@font-face {
  font-family: 'Myfont';
  font-style: normal;
  font-weight: 200;
  src: local('Segoe UI Light'), local('SegoeUI-Light');

}

body{
    font-family: 'Myfont'; 
}

this code fixed my problem like yours

Answer 2

I had a similar issue myself, with the browser only rendering standard Segoe UI as opposed to the lighter version. If you change the font-family to Segoe UI Light it should do what you want.

Please see the revised code below:

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

Answer 3

Interesting ... I'm having almost the reverse problem ... I can get Segoe UI Light to render properly in Chrome and IE 10, but not in FF 21.

In another post some time back, it was suggested to use something similar to what Microsoft uses on their site ...

h1, h2, h3, h4, h5, h6, h7 {
    font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
    font-weight: 300;
}

For the browsers that don't honor font-weight + the Segoe UI font, specifying Segoe UI Light first seems to guarantee that it renders the lighter weight font.

However, in FF 21, I'm still seeing the normal Segoe UI font regardless of what I try. Firebug indicates that it's choosing the Segoe UI font from the list.

Answer 4

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 5

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?