How to fix google font pixelation issues on safari and chrome

Question

I have used Google font called http://fonts.googleapis.com/css?family=Merriweather:400,700,700italic on my website it looks good on Firefox and IE but not at the safari and Google chrome..... Please view the Image....

Image

I want it to be working on each of the browser without any pixelate issue

Requesting your best suggestion...........

Thanks

Answer 1

You cannot possibly control how a browser like Chrome renders fonts. You just have control over choosing the best font at best font-size.(Some fonts looks good only at certain font sizes - the font you are using looks good from 50px onward it seems. EDIT:Ah that is a different issue)

If you / your client is so specific you can even get help from some custom rendering like

1. Typeface.js
2. Cufon

which uses canvas/flash to render fonts. Using it extensively can cause performance issues or slowness.

There used to a font-smoothening, but I guess no longer supported, you can try it though -webkit-font-smoothing property has no effect in Chrome

Answer 2

Just try this:

{
  -webkit-text-stroke: 0.6px;
}

Answer 3

you can smooth fonts by using

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

read more: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth