How can I improve font appearance in google chrome?

Question

.

On the left is firefox 4, on the right is chrome 12. Is there a way to make chrome render prettier fonts?

The above image was taken on windows xp. Below is another example from windows 7.

Answer 1

Check ClearType settings - the Chrome screenshot looks like it's being forced to render non-anti-aliased. That will kill just about any web font, since they don't have monochrome hints (for size reasons among other things). I used to see this reported as "IE renders text better", because it ignores your OS-level ClearType settings and turns it on by default.

Answer 2

Place the SVG file higher in the font-face css rule, either 1st or second for example:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Instead of:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Examples of this fix can be seen here:

FontSpring Examples
Adtrak Examples

Answer 3

Chrome is reading your ClearType setting which on Windows XP is switched off by default.

1. To fix the issue, first close the Chrome browser.

2. Now right-click anywhere on the desktop and select 'Properties' from the drop-down menu.

3. Click on the 'Appearance' tab found along the top on the new window.

4. And click on the 'Effects' button.

5. The second option down should read, "Use the following method to smooth edges of screen fonts."

6. Select the "ClearType" option.

7. Click Apply & Re-open your Chrome browser.

From now on Chrome will render your fonts nicely anti-aliased for that smooth effect.

Answer 4

Do you have GPU Acceleration enabled in Google Chrome? Type about:flags and look for GPU Accelerated Canvas 2D, Disable it if enabled. Fonts on some sites appear really jagged when I browsed with the acceleration enabled.

Answer 5

Within Google Chrome click on the Wrench > Options > Under the Hood > [next to Web Content] click Customize Fonts.

Change your settings so that your page looks just like mine

Then click the x, and see if your problem is fixed.

If this doesn't fix it, there might be one more thing... but I'll wait until you try this.

Answer 6

I had exactly the same issue, rendering webfonts from http://www.google.com/webfonts in Chrome. I tried all the suggestions on this and a couple of other sites and none of them worked.

Eventually I began inspecting the CSS properties of the affected text, it turned out to the the actual font colour that was causing the issue. A title given color:#454545 would render badly, yet the same title given the following: color:#333 worked fine. Thank God for user agent specific style sheets!

Answer 7

In Windows XP, I just changed the anti-alias option from "Default" to "Clear Type" in
Display → Properties → Appearance → VisualEffects.

Answer 8

Chrome takes the system clearType value for fonts. Looking better in Windows 7 explains that. On a Mac, Anti-aliasing is enabled for all fonts above size 8, I suppose. Try turning on or changing the clearType of your Windows machine

Update: Seems like Chrome 22 and up ignore the System Settings for clearType

Answer 9

All those answers are wrong! This is a big bug in Google Chrome, please see the official bug report/thread including lots of screenshots here: Official bug report on Chrome Code

Currently the best workaround is to simply give your element/headline this simple rule:

-webkit-text-stroke: 1px

Addition from Dr John: I found a suggestion that html { -webkit-text-stroke: 0.25px} would work as well - found it here https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Answer 10

It looks like the long and hard answer is you can't. There are plenty of discussions and suggestions in Chrome help, but I don't see anything worth suggesting.

The big question is how are you getting it to look so bad?! I'm using Chrome to type in this box... I even zoomed in a whole bunch and I don't see anything like you are. If you still have questions after this you should explain out your configuration to the community.

Answer 11

Chrome does not render web fonts well at the moment. There are several bugs on their issue tracker for this. Please star any relevant to you them to give them more attention.

Answer 12

Although Chrome is "useable" for the fonts, it looks thin and washed out where it renders diagonal lines especially. IE renders much better but IE is a slower browser and so it FireFox.

I believe this is inherent in the code for chrome.

BTW, HackToHell, where do I go to change the rendering color?

I'll try this.