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.
open sans strange behavior
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.
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 #import method 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.
Related
Why is font-family not working on IE11? My fusion chart using font 'Source Sans Pro', its work on chrome perfectly, but not in IE11. How do I fix it?
It looks like this on IE11
It should be like this(chrome)
it was defaulted by fusion chart, I didn't change it. when I inspect it, there is a style 'font-family = 'Source Sand Pro'.
But not working in IE11
Just download the font, then put #font-face in my CSS and called the font.
it will look like this :
#font-face{
font-family: Source Sans Pro;
src: URL(../fonts/SourceSansPro-Regular.ttf);
}
There are reports of IE not showing this typeface in other situations see for example https://www.joomla51.com/forum/font-source-sans-pro-not-displaying-correctly-in-internet-explorer-11
This site suggests that the browser having tracking protection enabled causes the problem.
Do you have tracking protection turned on in IE11? Try turning it off, and also try Edge if available. I believe MS turned on tracking protection by default on Edge fairly recently, I don't know what (if anything) they have done with IE.
And/or try turning tracking protection on in another browser and see if the font is still being picked up.
I'm having a problem with the display of Helvetica in IE. I first noticed this issue in IE8, but it's continued after upgrading to IE11. When a site is set to use Helvetica, I'll get strange extra characters (using looking like a cross) overlapping other text. If I look at the site in any other browser, the text displays just fine.
My best guess as to what is going on is that I have a wonky version of Helvetica that IE is using. But when I look in Windows>Fonts, I have a lot of them that include the word "Helvetica". How can I tell which font IE is using? Am I on the right track in thinking it's a font file issue?
Here's a page that's not working right, and a screenshot of what I see: http://gorowe.com/pages/get-assessed
To debug the situation I recommend playing with the font-family declaration and fallbacks in the CSS.
So for example, start with a generic font-family like this:
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
Verify that the problem exists, then try eliminating the Helvetica entry like this:
font-family: Arial, "Lucida Grande", sans-serif;
If the problem still exists, you know that this is not an issue with Helvetica itself. If the problem goes away, you know that Helvetica is the culprit.
If Helvetica itself is causing problems, I would double check the problem exists in all relevant IE versions (at least 9, 10, 11) and operating systems (Vista, 7, 8). Then continue debugging the problem like you would for other IE issues.
EDIT: If you are using webfonts, definitely double check that you are using the recommended font-family declarations for that file. Usually you can just open them up in a text editor and you will see the declaration. You will also need to follow best practices for declarations and fallbacks. Here is a relevant example: Getting web fonts to work in IE10
EDIT 2: This syntax assumes the machine has Helvetica installed as a system font. You might want to research the safety of this assumption. More info here: Internet Explorer automatically switches to compatibility mode (IE9 and IE10)
http://img31.imageshack.us/img31/6730/4x1f.png
This is an example of the pixelated text when I set the font size to anything other than 80 or 65. Would anybody happen to know why the text gets pixelated like this?
Code to replicate this issue:
<div class="top_text">Hello! Please check back some other time, this website is in development.</div>
.top_text{
font-family: "Arial Black";
font-size: 38px;
}
Browser: Google Chrome
OS: Windows 8
It looks aliased, I would rather it be antialiased.
Google Chrome currently uses a really old text-rendering method, GDI, on Windows. Source. Firefox, IE (and most other applications you run) use ClearType, which has lots of features (like font hinting) which make text look more "anti-aliased".
Chrome devs are supposedly fixing it; if you believe the above link, the fix is due to be released soon. For now, however, most fonts will look badly-aliased in Chrome, except at specific font sizes.
Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.
Im using it in font-weight:100;
here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?
Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/
FIREFOX
CHROME
SAFARI
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.
I resolved this by adding below css property.
-webkit-font-smoothing: antialiased;
I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:
http://fonts.googleapis.com/css?family=Lato:300,400
Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!
I'm using google webfonts and they fine at super large font sizes, but at 18px, they look awful. I've read here and there that there are solutions for font smoothing, but I haven't found any where that explains it clearly and the few snippets I have found don't work at all.
My h4 looks awful in pretty much every browser, but Chrome is the worst. In Chrome, pretty much all of my fonts look terrible.
Can anyone point me in the right direction? Perhaps you know of a resource that explains this clearly? Thanks!
EXAMPLE SCREENSHOT #1
This screenshot shows the homepage of https://www.dartlang.org/, a programming language that is made by Google (so we can imply that this website is also build by Google) and uses Google Webfonts.
Screenshot shows Google Chrome on the left, Firefox/Internet Explorer on the right.:
EXAMPLE SCREENSHOT #2
This screenshot shows a product info page on Adobe.com, using webfonts provided by Typekit. Adobe & Typekit are professionals when it comes to fonts.
Screenshot shows Google Chrome on the right, Firefox/Internet Explorer on the left:
Status of the issue, June 2014: Fixed with Chrome 37
Finally, the Chrome team will release a fix for this issue with Chrome 37 which will be released to public in July 2014. See example comparison of current stable Chrome 35 and latest Chrome 37 (early development preview) here:
Status of the issue, December 2013
1.) There is NO proper solution when loading fonts via #import, <link href= or Google's webfont.js. The problem is that Chrome simply requests .woff files from Google's API which render horribly. Surprisingly all other font file types render beautifully. However, there are some CSS tricks that will "smoothen" the rendered font a little bit, you'll find the workaround(s) deeper in this answer.
2.) There IS a real solution for this when self-hosting the fonts, first posted by Jaime Fernandez in another answer on this Stackoverflow page, which fixes this issue by loading web fonts in a special order. I would feel bad to simply copy his excellent answer, so please have a look there. There is also an (unproven) solution that recommends using only TTF/OTF fonts as they are now supported by nearly all browsers.
3.) The Google Chrome developer team works on that issue. As there have been several huge changes in the rendering engine there's obviously something in progress.
I've written a large blog post on that issue, feel free to have a look:
How to fix the ugly font rendering in Google Chrome
Reproduceable examples
See how the example from the initial question look today, in Chrome 29:
POSITIVE EXAMPLE:
Left: Firefox 23, right: Chrome 29
POSITIVE EXAMPLE:
Top: Firefox 23, bottom: Chrome 29
NEGATIVE EXAMPLE: Chrome 30
NEGATIVE EXAMPLE: Chrome 29
Solution
Fixing the above screenshot with -webkit-text-stroke:
First row is default, second has:
-webkit-text-stroke: 0.3px;
Third row has:
-webkit-text-stroke: 0.6px;
So, the way to fix those fonts is simply giving them
-webkit-text-stroke: 0.Xpx;
or the RGBa syntax (by nezroy, found in the comments! Thanks!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
There's also an outdated possibility:
Give the text a simple (fake) shadow:
text-shadow: #fff 0px 1px 1px;
RGBa solution (found in Jasper Espejo's blog):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
I made a blog post on this:
If you want to be updated on this issue, have a look on the according blog post: How to fix the ugly font rendering in Google Chrome. I'll post news if there're news on this.
My original answer:
This is a big bug in Google Chrome and the Google Chrome Team does know about this, see the official bug report here. Currently, in May 2013, even 11 months after the bug was reported, it's not solved. It's a strange thing that the only browser that messes up Google Webfonts is Google's own browser Chrome (!). But there's a simple workaround that will fix the problem, please see below for the solution.
STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013
Official statement in the bug report comments:
Our Windows font rendering is actively being worked on. ... We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.
I had the same problem, and I found the solution in this post of Sam Goddard,
The solution if to defined the call to the font twice. First as it is recommended, to be used for all the browsers, and after a particular call only for Chrome with a special media query:
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}
With this method the font will render good in all browsers. The only negative point that I found is that the font file is also downloaded twice.
You can find an spanish version of this article in my page
Chrome doesn't render the fonts like Firefox or any other browser does. This is generally a problem in Chrome running on Windows only. If you want to make the fonts smooth, use the -webkit-font-smoothing property on yer h4 tags like this.
h4 {
-webkit-font-smoothing: antialiased;
}
You can also use subpixel-antialiased, this will give you different type of smoothing (making the text a little blurry/shadowed). However, you will need a nightly version to see the effects. You can learn more about font smoothing here.
Ok you can use this simply
-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;
Make sure your text color and upper text-stroke-width must me same and that's it.