How to get smooth Google fonts?

Question

I formerly used the plugin WP Google Fonts, which hasn't got my requested feature, either.

For now I'm using Google fonts with an implemented feature in the currently used theme. The fonts are embedded without trouble and they are shown correctly.

For now there are plenty blogs with nicely readable smooth fonts for HD displays and I want those fonts, too. As seen in my WordPress, it is capable of showing them, example below:

There are no sharp edges, no pixels, etc. That's how I would like it.

I selected "Droid Sans" currently as the font for my articles. But this font shows up WITH sharp edges and pixelated. Example below:

(Please note that opening this picture in a new tab shows the issue much more clearly.)

Is there anything to make this look smooth and cool?

• Is it just the wrong font? I'm not bound to it and tried some others fonts. They all seem to have those sharp edges. If you know a font for compare, please note it.
• Is there a CSS snippet I have to add?
• Is it a server-sided configuration?

How can I achieve smooth fonts in my articles page?

Answer 1

It can depend on what browser you are using.

I tend to use:

 -webkit-font-smoothing: antialiased;

or if you have blurry bold text:

-webkit-filter: blur(0.000001px);

on webkit browsers.

---

Alternatively, you can add a text-shadow to make the text seem smoother

 html, html a {
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 }

I also recommend you try different font sizes as some custom fonts will only look good at certain sizes.

Other than that, there isn't much you can do apart from use another font. Google Chrome did just release an update for smoother fonts. It might also be useful to look at svg fonts:

Google Fonts & http://www.fontspring.com/demos/svg-vs-woff/

Answer 2

I solved this issue, using google fonts like SVG:

<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
 </style>