CODEWITHSUNDEEP
javascripthtmlcssfonts
Adam
Adam

Reputation: 9049

Google fonts in windows is jagged

I've seen a lot of posts on this, but people have written that it's only rendering improperly in windows Chrome. In my case, it's most of the browsers including the IE's. Cleartype is turned on by default, so that was not the issue.

I can't believe that windows can't handle Google Fonts properly. Perhaps, someone out there might have a workable solution or a reasonable fallback.

Is it wise to just use Arial for Windows machines? Is there a script that detects OS type, and if so, should I implement it? I know I should just choose a basic font, but I might as well please the OSX crowd?

EDIT:

I should add that I'm using News Cycle. It even looks kind of bad on the Google Fonts website at 18px and below.

Upvotes: 0

Views: 1998

Answers (3)

Trevor Dixon
Trevor Dixon

Reputation: 24382

I've only had the problem in Chrome on Windows. A workaround used to be to add an invisible text-shadow or rotate the text just a tiny bit, but that has stopped working since about version 16. I've found that sometimes the following CSS property can help with some fonts:

-webkit-text-stroke-width: .5px;

Upvotes: 1

piatek
piatek

Reputation: 376

Choose your fonts wisely and always test. Google fonts is an amazing resource but not every font will display correctly or even be legible across all browsers/platforms.

Edit: There lots of resources on google on fonts. You need to research 'font stacks' and that will shed some light on your choice of fallback fonts. IMHO, I don't really think user agent sniffing is necessary in this case ...

Here is a pretty good article, although a bit old: http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

Upvotes: 1

Chris
Chris

Reputation: 26898

I don't know about the jagged-rendering issue, but for fallback, you can detect the OS using the navigator.userAgent property in JavaScript.

Windows user-agents contain the substring NT x.y, for instance NT 6.1 is for Windows 7.

Edit: You can also use the navigator.appVersion property. Here's a sample:

if(navigator.appVersion.indexOf("Win") != -1)
    OS = "Windows";
if(navigator.appVersion.indexOf("Mac") != -1)
    OS = "MacOS";
if(navigator.appVersion.indexOf("X11") != -1)
    OS = "Unix";
if(navigator.appVersion.indexOf("Linux") != -1)
    OS = "Linux";

if(OS == "Windows") {
    //add specific styles
}

To automate the process, you can use CSS User Agent, which adds classes to elements depending on the OS.

Upvotes: 2

Related Questions