I'm having issues with how the fonts are rendering on a site I'm working on the font-weight is all 300 and I'm using the Google font lato. This issue only seems to be on Google chrome i've tried it on different versions of chrome i.e. windows and Linux and different browsers i.e. Firefox and safari. I had the import code in my style sheet but have since removed it and put it in the html but to no avail. I've also got -webkit-font-smoothing: antialiased; on.
I have uploaded an image to show you how the font is rendering
Thanks in advance for your help.
Thanks for your help with this. I managed to solve the problem, the issue was setting font-feature-settings: "kern","liga","frac","pnum"; to the body of my pages this caused the random words being bold. This wasn't being used effectively so i've removed it. I haven't been able to replicate this so this could be a combination of things.
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.
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.
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
I don't even know how to properly identify what the issue is here, but my Google Chrome isn't rendering fonts properly. At least not Helvetica, anyways. Taking a screenshot is the only proper way I can explain what's happening:
http://i.imgur.com/rKlI86r.jpg
This happens with nearly every website, but only in my Chrome. I have no clue how to fix this.
Thanks.
Its a problem with the font Helvetica that you have in your system. Just uninstall that font.
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!