By imakeitpretty


2012-07-14 21:12:44 8 Comments

I'm using google webfonts and they fine at super large font sizes, but at 18px, they look awful. I've read here and there that there are solutions for font smoothing, but I haven't found any where that explains it clearly and the few snippets I have found don't work at all.

My h4 looks awful in pretty much every browser, but Chrome is the worst. In Chrome, pretty much all of my fonts look terrible.

Can anyone point me in the right direction? Perhaps you know of a resource that explains this clearly? Thanks!

EXAMPLE SCREENSHOT #1

This screenshot shows the homepage of https://www.dartlang.org/, a programming language that is made by Google (so we can imply that this website is also build by Google) and uses Google Webfonts.

Screenshot shows Google Chrome on the left, Firefox/Internet Explorer on the right.:

google chrome on the left, firefox/internet explorer on the right

EXAMPLE SCREENSHOT #2

This screenshot shows a product info page on Adobe.com, using webfonts provided by Typekit. Adobe & Typekit are professionals when it comes to fonts.

Screenshot shows Google Chrome on the right, Firefox/Internet Explorer on the left:

google chrome on the left, firefox/internet explorer on the right

5 comments

@Sliq 2012-07-15 16:16:26

Status of the issue, June 2014: Fixed with Chrome 37

Finally, the Chrome team will release a fix for this issue with Chrome 37 which will be released to public in July 2014. See example comparison of current stable Chrome 35 and latest Chrome 37 (early development preview) here:

enter image description here

Status of the issue, December 2013

1.) There is NO proper solution when loading fonts via @import, <link href= or Google's webfont.js. The problem is that Chrome simply requests .woff files from Google's API which render horribly. Surprisingly all other font file types render beautifully. However, there are some CSS tricks that will "smoothen" the rendered font a little bit, you'll find the workaround(s) deeper in this answer.

2.) There IS a real solution for this when self-hosting the fonts, first posted by Jaime Fernandez in another answer on this Stackoverflow page, which fixes this issue by loading web fonts in a special order. I would feel bad to simply copy his excellent answer, so please have a look there. There is also an (unproven) solution that recommends using only TTF/OTF fonts as they are now supported by nearly all browsers.

3.) The Google Chrome developer team works on that issue. As there have been several huge changes in the rendering engine there's obviously something in progress.

I've written a large blog post on that issue, feel free to have a look: How to fix the ugly font rendering in Google Chrome

Reproduceable examples

See how the example from the initial question look today, in Chrome 29:

POSITIVE EXAMPLE:

Left: Firefox 23, right: Chrome 29

enter image description here

POSITIVE EXAMPLE:

Top: Firefox 23, bottom: Chrome 29

enter image description here

NEGATIVE EXAMPLE: Chrome 30

enter image description here

NEGATIVE EXAMPLE: Chrome 29

enter image description here

Solution

Fixing the above screenshot with -webkit-text-stroke:

enter image description here

First row is default, second has:

-webkit-text-stroke: 0.3px;

Third row has:

-webkit-text-stroke: 0.6px;

So, the way to fix those fonts is simply giving them

-webkit-text-stroke: 0.Xpx;

or the RGBa syntax (by nezroy, found in the comments! Thanks!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

There's also an outdated possibility: Give the text a simple (fake) shadow:

text-shadow: #fff 0px 1px 1px;

RGBa solution (found in Jasper Espejo's blog):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

I made a blog post on this:

If you want to be updated on this issue, have a look on the according blog post: How to fix the ugly font rendering in Google Chrome. I'll post news if there're news on this.

My original answer:

This is a big bug in Google Chrome and the Google Chrome Team does know about this, see the official bug report here. Currently, in May 2013, even 11 months after the bug was reported, it's not solved. It's a strange thing that the only browser that messes up Google Webfonts is Google's own browser Chrome (!). But there's a simple workaround that will fix the problem, please see below for the solution.

STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013

Official statement in the bug report comments:

Our Windows font rendering is actively being worked on. ... We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.

@Kushagra 2012-07-17 05:59:28

The problem is not in all the browsers running on Windows, it's just in the case of Chrome. Firefox, Opera and IE have proper anti-aliasing of the fonts. Although, it can be fixed in chrome by using -webkit-font-smoothing property. See my answer below.

@Yoone 2013-03-08 20:10:31

For black text, I used text-shadow: #333 0px 0px 1px;. Thanks a lot for the tip.

@nezroy 2013-03-28 01:03:45

Maybe it got lost in translation but -webkit-text-stroke only works when you use an alpha of the color of the font. So for a black font I use something like "-webkit-text-stroke: 1px rgba(0,0,0,0.1)".

@jwadsack 2013-10-16 23:16:17

I've noticed that Chrome 30 on Mac is now exhibiting the same lack of antialiasing.

@Sliq 2013-11-14 09:31:08

@jwadsack Can you give more info (screenshots etc.) ?

@jwadsack 2013-11-14 20:29:33

@Panique I just updated to Chrome 31 which is no longer exhibiting it. If I get another machine on 30 I'll grab a screen shot

@Douglas Manley 2013-12-06 06:30:25

I had a similar problem on Kubuntu; it had to do with Chrome being the only browser that I had that actually respected the system-level "font antialiasing" setting. I had turned it off years ago when I had a really bad video card and never bothered turned it back on. Turning on system-level antialiasing fixed the problem for me. See this page for a similar story.

@namuol 2014-02-10 23:46:10

@jwadsack Using Chrome 32.0.1700.107 m in Windows 8 x64, and it is still exhibiting the unwanted aliasing behavior.

@Sliq 2014-02-10 23:50:27

@namuol Read the article.

@Gruber 2014-05-12 19:21:44

In the official ticket on the chrome board for this issue code.google.com/p/chromium/issues/detail?id=137692 it seems to be aimed as fix for v37, if I've undrestand correctly the last post in the thread.

@StanE 2017-01-23 19:21:27

Since v52 or so they removed GDI rendering, which causes blurry fonts (I think due to "direct write" - whatever this is...). The Patch was made only by one or two people and they refuse to change it back. Blurry text everywhere - nearly unreadable. Even in the newest version. Like they are blind or so. Our customers complain. This is 2017...

@Jaime Fernandez 2013-10-25 05:55:17

I had the same problem, and I found the solution in this post of Sam Goddard,

The solution if to defined the call to the font twice. First as it is recommended, to be used for all the browsers, and after a particular call only for Chrome with a special media query:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

enter image description here

With this method the font will render good in all browsers. The only negative point that I found is that the font file is also downloaded twice.

You can find an spanish version of this article in my page

@jduncanator 2013-11-03 05:26:35

This is actually the correct answer, however it can be simplified. Simply listing the SVG version FIRST in the list of fonts solves the issue too!

@Timidfriendly 2013-11-06 15:40:55

This answer gives — by far — the best results. The SVG font looks x100 better than the -webkit-text-stroke hack. The main downside is the font-size of the SVG version; it's normally much bigger :-( Google really needs to get this sorted a.s.a.p.

@Sliq 2013-11-08 21:03:14

I totally agree ! I'll link to this answer from within my answer.

@RoelN 2014-04-02 10:59:29

@jduncanator Listing the SVG first is not advisable — this means the SVG font will be loaded by every single browser that supports it, while you just need it for Chrome on Windows.

@jduncanator 2014-04-04 08:46:04

@RoelN And what exactly is wrong with that?

@RoelN 2014-04-05 08:41:39

@jduncanator The two main culprits are no hinting support and the large filesize (gzip compression for fonts is not enabled by default on many server).

@Yavierre 2013-12-06 06:24:20

I will say before all that this will not always works, i have tested this with sans-serif font and external fonts like open sans

Sometimes, when you use huge fonts, try to approximate to font-size:49px and upper

font-size:48px

This is a header text with a size of 48px (font-size:48px; in the element that contains the text).

But, if you up the 48px to font-size:49px; (and 50px, 60px, 80px, etc...), something interesting happens

font-size:49px

The text automatically get smooth, and seems really good

For another side...

If you are looking for small fonts, you can try this, but isn't very effective.

To the parent of the text, just apply the next css property: -webkit-backface-visibility: hidden;

You can transform something like this:

-webkit-backface-visibility: visible;

To this:

-webkit-backface-visibility: hidden;

(the font is Kreon)

Consider that when you are not putting that property, -webkit-backface-visibility: visible; is inherit

But be careful, that practice will not give always good results, if you see carefully, Chrome just make the text look a little bit blurry.

Another interesting fact:

-webkit-backface-visibility: hidden; will works too when you transform a text in Chrome (with the -webkit-transform property, that includes rotations, skews, etc)

Without

Without -webkit-backface-visibility: hidden;

With

With -webkit-backface-visibility: hidden;

Well, I don't know why that practices works, but it does for me. Sorry for my weird english.

@Rishabh Gupta 2013-04-03 13:58:12

Ok you can use this simply

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Make sure your text color and upper text-stroke-width must me same and that's it.

@Moss 2013-10-28 16:18:50

font smoothing no longer does anything but the text stroke works and can help on some fonts. I seemed to get best results with a 0.5px stroke and rgba(0,0,0,0.5).

@Jeff Walters 2014-12-04 01:53:23

the firefox equivalent is -moz-osx-font-smoothing: grayscale;

@Sagive SEO 2015-12-03 22:49:43

this is nice... just replace #34343b with inherit.. ;)

@Kushagra 2012-07-15 04:10:14

Chrome doesn't render the fonts like Firefox or any other browser does. This is generally a problem in Chrome running on Windows only. If you want to make the fonts smooth, use the -webkit-font-smoothing property on yer h4 tags like this.

h4 {
    -webkit-font-smoothing: antialiased;
}

You can also use subpixel-antialiased, this will give you different type of smoothing (making the text a little blurry/shadowed). However, you will need a nightly version to see the effects. You can learn more about font smoothing here.

@thednp 2013-02-08 12:32:32

I have latest version Chrome today 8-feb-2013 and this page here shows no difference between them maxvoltar.com/sandbox/fontsmoothing

@KryptoniteDove 2013-02-20 16:54:43

This doesn't work (tested on windows). As mac's do this anyway I down marked to dissuade people from using it.

@jay_t55 2013-08-09 23:29:25

This does not work. I just tried it on Windows 8. With whatever the latest version of Chrome is (as of 10/8/2013).

@Justin 2013-08-22 20:08:34

On Mac Chrome and Safari this DOES work so it is worth adding. Apple.com even uses it in their base.css stylesheet: body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }

@Tracker1 2014-01-22 23:28:58

@Justin they also seem to use Helvetica, Arial, and Verdana before sans-serif, which would show the best one one a given platform.

@Jeff Walters 2014-12-04 01:52:02

the firefox equivalent is -moz-osx-font-smoothing: grayscale;

Related Questions

Sponsored Content

30 Answered Questions

[SOLVED] Disable same origin policy in Chrome

31 Answered Questions

7 Answered Questions

[SOLVED] How to add multiple font files for the same font?

11 Answered Questions

[SOLVED] How to import Google Web Font in CSS file?

11 Answered Questions

[SOLVED] How to remove focus border (outline) around text/input boxes? (Chrome)

27 Answered Questions

[SOLVED] I need an unordered list without any bullets

  • 2009-06-22 13:57:53
  • praveenjayapal
  • 1999295 View
  • 2394 Score
  • 27 Answer
  • Tags:   html css

29 Answered Questions

[SOLVED] How do I get ASP.NET Web API to return JSON instead of XML using Chrome?

3 Answered Questions

[SOLVED] google font not displayed in Chrome

2 Answered Questions

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

1 Answered Questions

Google Fonts not appearing properly in Google Chrome

Sponsored Content