2

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

user3303878
  • 33
  • 1
  • 7
  • Difference in font rendering, try different fonts, also try different font-size, there used to be a css but no longer there http://stackoverflow.com/questions/18786829/webkit-font-smoothing-property-has-no-effect-in-chrome – sabithpocker Apr 12 '14 at 10:39

3 Answers3

1

Just try this:

{
  -webkit-text-stroke: 0.6px;
}
Pokechu22
  • 4,984
  • 9
  • 37
  • 62
Gener Cruz
  • 27
  • 1
0

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

Community
  • 1
  • 1
sabithpocker
  • 15,274
  • 1
  • 42
  • 75
0

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

Rizwan
  • 3,741
  • 2
  • 25
  • 22