Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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
Both lines look pixelated. Especially the first a in the heading.
Any pointers on what could be the issue ?
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.
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>
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;
