Jagged Font on Windows - Chrome & Safari

Jagged font on Windows - Chrome & Safari

@font-face fonts on PC generally look a little more ropey, but 'Hinting' the fonts will improve readability.

Try running your fonts through the font squirrel convertor, which can process the hinting as part of the conversion.

http://www.fontsquirrel.com/fontface/generator

As a side note I'd also just not use @font-face for Helvetica, and just rely on people having the font installed, falling back to Arial. Not the closest match, but it will give you the best result.

Google web fonts in chrome, safari and ie on windows 7 - jagged, thing, and differently sized

You can specify a text-shadow of the same color as the background:

text-shadow: 0 1px 1px white;

How to prevent large fonts from looking jagged in Chrome (OSX)?

Turning chrome://settings "Use hardware acceleration when available" OFF fixed it for me.

At first I was not able to reproduce the jagginess/blockiness, but I realized I was looking at it on MacOS [High] Sierra, and you specified Mojave. So I tried it there, and it is absolutely awful. I'm really surprised this escaped anyone's notice in testing. I'd imagine there will be an update to either Chrome or Mojave that addresses this soon.

I guess this is actually related to a change to the OS defaults; Apple apparently disabled sub-pixel font rendering in Mojave and passed it off as a "refinement". Sub-pixel rendering is handled by the GPU, hence disabling GPU rendering in Chrome "fixes" it. I guess you could also use the defaults write technique specified in the link I mentioned.

In any case: this is probably not something you can address in your CSS code, since it is related to user-local/machine settings.

Safari font rendering issues

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

Google webfonts render choppy in Chrome on Windows

Update August 2014

Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.

Problem

The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.

But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692

Update Oct 2013 (Thanks to @Catch22)

Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

First approach solution:

The Fontspring bulletproof syntax modified to serve the svg first:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

Why does the font on my website look so much smoother on Chrome for Android?

Short answer: blame the browser if you're on Windows 7, blame both the browser and your monitor if you're on Windows 8.

Why Google Chrome on Windows 7 looks bad

The latest version of Google Chrome on Windows uses GDI, an API that provides legacy text rendering. GDI relies on strongly hinted fonts (fonts which explicitly specify how to reshape characters to make them look sharper and less jagged). Most webfonts from Google are unlikely to be serving the strongly hinted fonts that GDI needs to render smooth text.

Second thing is, GDI wasn't designed in the days where big font sizes were prevalent, so it doesn't render smooth text at large font sizes. It occurs everywhere even with the system fonts (e.g. Arial) that are already well hinted.

Android's built-in text renderer, however, is simply better at text rendering.

Blame Google Chrome for using a legacy API on Windows.

Alternatives

Internet Explorer 9+ and Mozilla Firefox use Direct2D, a new graphics API that provides better text-rendering. However, it is only supported on Windows Vista and Windows 7. You'll find that IE and Fx will render the text more or less the same on Windows XP because only GDI exists on that platform.

More on Cleartype

Cleartype refers to a multitude of rendering methods to smooth text out on a monitor. The Cleartype methods employed by GDI are vastly different than that employed by Direct2D. To further complicate things, Direct2D can simulate the Cleartype rending in GDI, or use a cross-over of the default Cleartype in Direct2D and the Cleartype in GDI. There is nothing much the web developer can do but hope that browsers choose a suitable choice. Take note however, that to one Cleartype might look smoother, to others one might think it looks blurry.

The issue with Windows 8

As if things weren't complicated enough, on Windows 8, in IE 10 and in Windows Store Apps, Cleartype uses greyscale anti-aliasing instead of sub-pixel aliasing on both the horizontal and vertical axes. This is because in Windows 8, screens are more likely to rotated, and using sub-pixel anti-aliasing would break as the subpixels are no longer perpendicular to the anti-aliasing direction. Since greyscale anti-aliasing doesn't use subpixels, it looks horrible if the pixels on your monitor are big (i.e. low-dpi/ppi monitor).

But hey, isn't this what Android and iOS do?

Greyscale anti-aliasing is indeed the method employed by Android and iOS. But since these mobile devices have such high dpi screens, it looks just about as good as sub-pixel anti-aliasing would offer.

Poor font rendering for QuickSand (Google font) in Chrome and IE

The problem was due to Google Fonts not implementing all of the font file types. The solution was to use font squirrel web font generator to generate the missing file types and host them myself.

Jagged Font on Windows - Chrome & Safari