0

I am trying to use Merriweather and Source Sans Pro for my website. These fonts look flawless on the Google Fonts website. However when I try to use them on my webpages they look pixelated. Even on the same browser that displays them perfectly on the Google Fonts website. For example

enter image description here

Both lines look pixelated. Especially the first a in the heading.

Any pointers on what could be the issue ?

1
  • 1
    Not sure what you mean. Fonts are rendered with pixels ... your image does have anti-aliasing. Maybe show comparison with the font in the same size and color as in Google Fonts?
    – Wolff
    Mar 16, 2021 at 17:49

2 Answers 2

2

I don't see anything I would describe as "pixelized". Rather, it looks more like a rendering problem. I have tested this on the Google Fonts site, and with a simple HTML document, both viewed in Firefox and Chrome (Windows 10), with text at the same size, and rendering looks identical to me.

However I have noticed that the "a" doesn't render so well at some font sizes.

At 36px, the upper storey curve of the "a" is thickened. Whereas at 35px it looks much better. As to the source of the problem, I'm not sure. Perhaps it's a Win10 issue, a browser rendering problem, or perhaps the font design itself.

enter image description here

Here's the HTML if anyone wants to test it:

 <!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> 
<body>

<h1 style="font-family: 'Merriweather', serif; font-size: 36px; font-weight: 700;">Leader election in Go</h1>
<h1 style="font-family: 'Merriweather', serif; font-size: 35px; font-weight: 700;">Leader election in Go</h1>

</body>
</html>
2

It's a common issue with fonts being rendered in the web. There's a time old css solution that will smooth out the appearance, blending the sub-pixel rendering further.

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.