Geek Answers Handbook

Segoe UI Light Font Not Displaying Correctly in Google Chrome

I use the Segoe UI Light font on my website.

The css used is as follows.

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

But Google Chrome does not display this font correctly. I get a Segoe UI Light bold font in Chrome.

Picture. The Screen Shots joined of different browsers.

The browser versions that I use.

Internet Explorer: 9

Mozilla Firefox: 21

Google Chrome: 27

+8
html css google-chrome fonts
source share
5 answers

It's hard to get this working in Firefox. Font weight 300 does not work several times in all versions. The following code worked for me and is compatible with all browsers.

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

See Here . This is from an HTML5 solution, but it can also help you, just like in Visual Studio ... When you hover over the CSS font-weight options you will say the weight in words (Light, Semi, etc.), 100: Thin 200: Extra Light 300: Light 400: Normal 500: Medium 600: Bold (Demi Bold) 700: Bold 800: Extra Bold Hope this helps.

Follow the options below and add font-weight instead of using bold or half light. Just use "segoe ui" with a combination of font weights.

  @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"); }
+3
source share

There may be various reasons:

  • You may be using the wrong font format. Chrome supports SVG, WOFF, TTF / OFT.
  • He took the wrong approach to determining font density, which causes the browser to incorrectly interpret the font-weight property.

Example: http://pastebin.com/FiGvAfTk

Do you define your fonts correctly?

+1
source share

Interesting ... I have an almost inverse problem ... I can get Segoe UI Light to display correctly in Chrome and IE 10, but not in FF 21.

In another post back , it was suggested using something similar to what Microsoft uses on its 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 browsers that don’t respect the font of the font + Segoe UI font, specifying Segoe UI Light at first seems to ensure that it displays a font of lighter weight.

However, in FF 21, I still see a regular Segoe font, no matter what I try. Firebug indicates that it selects the Segoe UI font from the list.

+1
source share

I had a similar problem myself, while the browser only provided the standard Segoe user interface, unlike the lighter version. If you change the font family to Segoe UI Light, it should do what you want.

See revised code below:

 .divMainHeader { font-family:"Segoe UI Light"; font-size:28pt; font-weight:100; width:100% }
+1
source share
 @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

0
source share

More articles:


All Articles