How to get smooth Google fonts?

Question

I used to use the WP Google Fonts plugin, which also did not receive my requested function.

I am currently using Google fonts with an implemented feature in the currently used theme. Fonts are built in without problems, and they are displayed correctly.

At the moment there are many blogs with beautifully readable smooth fonts for HD displays, and I also need these fonts. As can be seen from my WordPress, it can show them, for example below:

No sharp edges, no pixels, etc. This is how I would like.

I chose "Droid Sans" as the font for my articles. But this font appears with sharp edges and is pixelated. Example below:

(Note that opening this photo in a new tab shows the problem much more clearly.)

Is there anything to look so smooth and cool?

• Is this just the wrong font? I am not attached to it and tried some other fonts. Everyone seems to have these sharp edges. If you know the font to compare, pay attention to it.
• Is there a CSS snippet I should add?
• Is this a server configuration?

How to achieve smooth fonts on my article page?

Answer 1

This may depend on which browser you are using.

I tend to use:

-webkit-font-smoothing: antialiased; 

or for blurry bold text:

 -webkit-filter: blur(0.000001px); 

for web browsers.

In addition, you can add a text shadow to make the text smoother.

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

I also recommend that you use fonts of different sizes, as some custom fonts will look good only at certain sizes.

Other than that, you can do nothing but use a different font. Google Chrome has just released an update for smoother fonts. It may also be useful to take a look at SVG fonts.

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

Answer 2

I solved this problem 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>