I am seeing an issue with a site I am developing where the content regions of the page are showing random artifacts with font rendering. The pages are using Google Font 'Source Sans Pro' and there are no additional tags other that p-tags in the screenshot below. It looks like it is using the fallback sans-serif on parts of the page and the appropriate font in others.
I've also noticed if I toggle the font-family CSS attribute in the console on and off it remedies the appearance... Additionally if I refresh the page (instead of using the on-site navigation) it also seems to render properly. I've not been able to replicate this on another machine with the latest version of Chrome, but it is consistent across my development and test environments. The only extensions I am using are Disconnect, AdBlock, PageSpeed Insights, an RSS reader, and Javascript Quickswithcer... All other browsers appear to behave as expected.
CSS used:
body,*{font-family: 'Source Sans Pro',sans-serif}
Any ideas as to why the latest version of Chrome for Windows may be getting presented this way?
I believe I came across a similar issue. I was able to fix it by overriding the CSS text-rendering: optimizeLegibility set on the body tag by a CSS framework I was using like so:
body { text-rendering: auto; }
Note: In the interest of trying to track the bug down, my version of Chrome is 48.0.2564.116 (64-bit) on OSX El Capitan. A coworker told me about the issue and I had to switch to incognito mode before I started seeing the issue.
Related
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.
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.
All WordPress sites render strangely and Google searches look weird as well.
For WordPress sites, it loads fine, but then looks like the picture moments later.
Additional information:
Mozilla Firefox had the same issue on the same page.
Enabling Microsoft TrueFont did nothing.
Restarting chrome did nothing (except the last time).
If you use an extension (font changer) to force all fonts into 'Times New Roman,' the problem vanishes.
Chrome LCD Text Antialiasing does not fix the problem.
Forcing other sites to use 'Noto Sans' (pre-relaunch) replicated the problem.
Whatever font Google used was also messed up. After relaunching and installing 'Noto Sans,' google was fixed. Google's font does not appear to be 'Noto Sans,' however, which leads me to believe it fixed itself somehow.
The problem appears in incognito mode.
Clearing the cache does not fix the problem.
I installed the font in question, which I discovered to be 'Noto Sans,' to my computer. Following a relaunch of chrome, it seemed to fix itself.
EDIT: This did not fix the problem, I had to manually install an extension to replace the text on pages with a custom font before the problem vanished.
I include say "Noto Sans" or "Ubuntu" on my webpage via css "#import".
If I compare the rendering on my page with the rendering on the GoogleFonts page it looks different for both fonts.
Even though I paste the same text into GoogleFonts and choose the same size, same background, same color.
Here is a picture: (especially visible with the "A")
Any idea if there is a setting I miss?
As you can see neither the weight nor the size matches. Especially the weight seems to be a problem. Comparing "Noto Sans" the font with the same weight looks much thicker on my page.
I downloaded the fonts from google into my system. But this also applies if I delete these fonts and the browser uses remote fonts.
I use MacOSX but checking in Browserstack it seems that the problem is effective in several browsers. I tested in Win7 with IE9 too.
Not sure about the IE browsers, but have you tried adding -webkit-font-smoothing: antialiased;? Google also uses -ms-text-size-adjust: 100%; for IE.
I'm having difficulty getting google fonts to work in Chrome
I'm using Google's suggested link element to retrieve the font (which dev tools confirms works fine).
link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic"
In the CSS file I'm setting the font-family to 'Roboto Condensed' for all h2, button, select and input elements
In Google Chrome only the fonts are not displayed. I've uploaded the actual files I'm having a problem with to here http://gmwildlife.org.uk/mapapp/_dev/
the associated css file is http://gmwildlife.org.uk/mapapp/_dev/style/app.css
On checking the dev tools in Chrome I can confirm the following
* Roboto is successfully retrieved by the client - I can see the response text
* On inspecting an input element, for instance, I can see that the computed font-family is Roboto Condensed i.e. Chrome isn't computing that css specificity is overwriting Roboto Condensed somewhere else
* There are no errors reported in the console log
I thought this might be the same issue as reported and resolved hereGoogle Fonts are not rendering on Google Chrome
However I've tried both the CSS webkit workaround and javascript workaround individually and together and neither is working. Any help would be greatly appreciated. I've spent two days rewriting large chunks of the page and trying to hack a solution together using various combinations without a result i.e. requesting open sans and roboto separately and together (as is now), placing styles at various places in the DOM.
Thank you for reading this.
RESOLVED: This was because the Roboto font I was using was italic. In Google Chrome I fixed this by adding 'font-style:italic' after every call to font-family:'Roboto Condensed'. I've left the broken version here gmwildlife.org.uk/mapapp/_dev and the fixed version is here gmwildlife.org.uk/mapapp