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?
2 Answers
Answers 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.
Answers 2
Different browsers have different methods of rendering typefaces. Chrome, being the biggest culprit for poorly rendering fonts at the best of times, I stumbled across a fair few articles on this issue (some as of recent.)
https://code.google.com/p/chromium/issues/detail?id=408587
If you install Google Canary (the Nightly "beta" build of Google Chrome) and test them on there, what results are you getting? Just checking, as it might be a version-specific bug. Reading a few articles it seems as of an update with Chrome recently, it will no longer render Segoe UI correctly at font-weight: 300/200.
Plus, be weary about using local fonts, anyone not using a Windows PC will not see this typeface render, ala Mac/Linux/Chrome/Firefox OS's.
There's free alternatives to local machines which you can download/use as a webfont (even if you plan to use a local website only) such as Google's Open Sans.
0 comments:
Post a Comment