Chrome Not Antialiasing Text

Chrome not antialiasing text

NOTE: Chrome 37 and later fixed font antialiasing, so this fix is no longer needed in the latest version fo Chrome.

---

I think the best solution is to convert your font to svg as chrome does render fonts with antialiasing if the font file format is svg.

You can get more info here in the article where I found the answer myself: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

So basically you must convert your font to svg format (using a font converter like font squirrel provides) and set media queries in your css so that the svg file format is specified first in your font declaration for chrome, but not for the other browsers.

/* This is the default font face used for all browsers. */
@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;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

And voilà. The font works in Chrome with antialiasing.

Why do fonts appear jagged in Chrome?

In windows 10:

• Go to the windows search, search for "This PC" right click and choose properties
• Go to advanced system settings
• Click the settings button in the performance group
• Check the box for "Smooth edges of screen fonts"
• Restart computer and your fonts will be back to normal

HTML5 canvas text anti-aliases in chrome, not in firefox

To solve this problem to achieve cross-browser compatibility, and considering it's used apparently for a game, I would suggest a different approach by converting and using it as a bitmap font instead.

You can convert the font in question to a sprite-sheet and then build a simple custom function to render the text.

The process is simple and the performance in more than adequate if there is not large amount of text that needs to be rendered.

The Basics

Here is an example:

• The font is converted to a bitmap font, basically a mono-spaced sprite-sheet, optimized size-wise (and converted here to a data-uri).
• Important: when generated only ASCII characters from and including 32 (space) are rendered, up to and including char 128.
• A custom function is made to parse each character in the string. The char is converted to an ASCII index and 32 is subtracted as we skipped that when making the sprite-sheet.
• A region in the sprite-sheet is calculated and then rendered directly to canvas at current position (x + string-index * character-width, y as-is).

// Note: font sprite-sheet premade using: 
//   https://jsfiddle.net/epistemex/bdm3tbtu/
var ctx, cw = 8, ch = 19, img = new Image; img.onload = go; img.src = bmp;
function go() {
  ctx = c.getContext("2d");
  // Custom text drawing function demo:
  myFillText(ctx, "My custom text fill function", 12, 8);
};

function myFillText(ctx, str, x, y) {
  x |= 0; y |= 0; // force x/y to integer positions
  for(var i = 0, ascii; i < str.length; i++) {
    // get ASCII code but offset -32 to match sprite-sheet
    ascii = str.charCodeAt(i) & 0xff - 32;
    // look-up bitmap font sprite-sheet and draw directly to canvas
    ctx.drawImage(img, ascii * cw, 0, cw, ch, x + i * cw, y, cw, ch);
  }
}

<canvas id=c width=600></canvas>
<script>
var bmp = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAATBAMAAAAXEGS4AAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACHRSTlMAljxY3CJ2uKuwIxoAAANySURBVFjD7VhNa9tAEH2SZUlH0ULPatJSH00/IEdBc8jREAg6OqSBHg29+LiR43R+djMfm9VXKKREDcRPrFc7mtGbeVptNsIBBxxwwP/GrMQBEyO53kNAt1BsdydoISrwPJgRbTA9Eq2nnpS7LiKWct/P5dte+6ujSsWu6q/t628vKzwH4htgUWJyfL7W3mE6xA0ioFcvAVnpkDtCfVwWYGRF8sku5pzg6RnGkBMBOfeOm/gT28hx77w9gDTOQe0f2FRZDIEsjpuMmZ/UmVx+b9eMuBkHfJ9bb4f52WG5CDimiCA4lpQm4Ue0QaTatgRkOwq95fcSgqz6deFVIkt4CEsCD3TI5ZetHfJA5gWA2ivURHf3Zj2srDASRw1QC8AyELyv9ebrKB8vHiSxzshnZbpq1T8JP1Kn4ifrrvgMfjoxLTkImFF5tgO8ksm7y4r7DvTmNhvIFPVnXfGZO9uL0YfKIC3jHTWhFD0gAhD6xXPTPGlQevAdKZ7V1FgTPwIKGAjT8GNm4ufLgfjiiuRGxVqcol6ZRjyOChsECI28a+jJHRYXckH8sNyYR87J5Oswj+DLBzceP1o8jRWPQfGSnnIpt9XzBrgKVUzDj2yt4qebjoZB/NnPDTumm5PlF4RkbX3XEQUlKecfczQivqwuZH8LqE9lwcAFfoAKEp+H4imMiVrFkwgonCIA1JfgY7rFW24S5+v392qDMA3/vIGKj8VqQev5iPhHDY/rMtkXPfFtYDAiYoJQFCdl9PZwtGcMZj4B57gD0WMzjzqvsl+P5Sy34pXtvheeQfFBeGnhCQRMxo9kqeLHFQpsb/tJuIvZx4YdT8pYL2pGI+IbF9NTeEi+tZM2RyNB517n8+axNVesw+L1l9AqPqfhmmv+ZhPROjkGTMbfX/MHM78+f19xwKKKaZN5hdu+zvdiHux2tO+Ir+beAyRt6XyXUUojuw2gX1DwCDLYmzT0JdcpXj00gaH4k/D/Xfw53YLVTOl3THuYvOPiOygxSQv7Ye7966bnECRNe59v4mPb0B0th/tsgAdWiDRyYa0N+2zAXnzlDdziZfHtfT4PBuJPwY+osq1m8aRvO0z5dKQjdDIJMvwLpLonQARRTMLf/idrcmRjKb7RyfgqMN+p+CcrvAxkFbDFK0GuH9ZezlyriV7RV+wIAX8AnAnL3b7xqFYAAAAASUVORK5CYII=";
</script>

Is there any font smoothing in Google Chrome?

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:

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

POSITIVE EXAMPLE:

Top: Firefox 23, bottom: Chrome 29

NEGATIVE EXAMPLE: Chrome 30

NEGATIVE EXAMPLE: Chrome 29

Solution

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

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.

webkit-font-smoothing property has no effect in Chrome

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/0vqp1bnkaoE

-webkit-font-smoothing no longer works. Google Chrome team intentionally changed this behavior. Seems font-smoothing wasn't applied "properly" on OSX in previous versions.

Make font in Google Chrome clearer, sharper

I discovered that having 24' inch led display @1920x1200 is the problem. I opened page https://almsaeedstudio.com/themes/AdminLTE/index.html in laptop with 15,6' inch display with the same resolution 1920x1200 and the fonts are very clear and smooth.

I also went to store and tried to open page with Lenovo ThinkPad T560 which has resolution 2880x1620 and the fonts were also clear and smooth.

To have smooth and clean fonts monitor must have very high resolution. Went also to apple store and checked about their resolution: 3840x2160 -> therefore clean fonts

For now I solved it like this:

• set registry entry HKEY_CURRENT_USER > Control Panel > Desktop > FontSmoothing to value 1. Font looks sharper, clearer, readable (just as I want it). But this works only if web page uses Arial font.

• installed Google Chrome Extension StyleBot with next css global style:

  div, h1, h2, h3, h4, h5, h6, textarea
  {
    font-family: "Arial";
  }
  

So every page I open renders with Arial font, which is very clear.

How can I force rotated text to anti-alias correctly in Chrome on Windows?

After further investigation it appears that the font rendering looks ok on all angles of rotation except for 90 and 270 degrees. Altering this by .1 degree seems to be sufficient to fix the rendering of the text.

ie.

transform: rotate(270.1deg)

Font smoothing in Google Chrome

Use CUFON instead of @font-face it's a better option as per the rendering font in windows because CUFON put the font in canvas & it's look smooth in windows.

---

Related Topics