CODEWITHSUNDEEP
htmlcssgoogle-chromesafarigoogle-font-api
user3303878
user3303878

Reputation: 33

How to fix google font pixelation issues on safari and chrome

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

Upvotes: 2

Views: 4513

Answers (3)

Rizwan
Rizwan

Reputation: 4433

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

Upvotes: 0

Gener Cruz
Gener Cruz

Reputation: 27

Just try this:

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

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15566

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

Upvotes: 0

Related Questions