3 days ago out of nowhere, I noticed that some sites I’ve built before using "Open sans" font from Google fonts as the main font are looking strange, choppy and pixelated on Chrome.
I’ve tried several fixes, going from adjusting the ClearType on Windows to disabling flags (accelerated 2d canvas) and disabling hardware acceleration on Chrome, pretty much tried everything I could find on the internet, and nothing works.
I also tried removing "Open sans" from my Windows font folder, but the font still looks pixelated on my sites. It was fine in Photoshop before I removed it.
This is a screenshot of what I am currently seeing.
The p tag is using a simple CSS for testing
font-family: 'Open sans';
font-size: 12px; / 20px (on the bellow paragraph)
font-weight: 700; / 400 (on the bellow paragraph)
-webkit-font-smoothing: antialiased;
On the style, I have the default @import url(‘https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap’); from Gooogle fonts.
Can anyone shed a light? Any help is appreciated. I don’t really want to format my computer just because of this damn buggy font. Also tested on Edge and Opera GX, and it happens on them as well.
3
Answers
You should be sure if it’s open sans. You can check it with whatfont plugin
I’ve also run into the same issue using Google Fonts’ Open Sans, both via the
@importmethod and the<link>method. Tested this against Brave (Version 1.30.89 Chromium: 94.0.4606.81), Chrome (94.0.4606.71), and Firefox (93.0). It exhibits this graininess on the fonts.google.com demo site at sizes like 18-20px, but at 16px or 21px the issue isn’t present.Interestingly, Adobe Fonts’ version of Open Sans doesn’t exhibit this issue, and is clear and antialiased at all sizes. I swapped my Google implementation with Adobe’s
<link>implementation instead and encountered the same issue.However, inspecting Adobe’s demo revealed they’ve also added a CSS property:
font-feature-settings: 'calt', 'clig', 'kern', 'liga', 'locl', 'rlig';. These are OpenType features, and adding this to my styles seems to resolve the issue, but only for the Adobe implementation; it did not resolve the issue with Google’s version. Perhaps Google’s version of Open Sans lacks these additional features.I had a similar problem, viz. Open Sans were looking jittery on our website (exactly as shown in the screenshot)
The problem was (kind of) solved when I used Adobe’s Open-Sans version, as suggested in the comments.
Finally, I discovered that in our CSS we were using a font-weight (300) that we weren’t importing from google fonts.
When added, everything worked smoothly, so we’re back to Google Fonts.