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.
Related
I'm using Google's font Rubik on a website (still work in progress) and it stopped showing any text suddenly!
It seems that even on Google Font website the font isn't working:
https://fonts.google.com/?selection.family=Rubik:400,900&query=rubik
("All their equipment and instruments are alive." isn't showing below Rubik, but if you inspect it, it is in there)
Is anyone else having the same problem?
I'm having this issue using Windows and Chrome, Firefox or Edge.
UPDATE: without changing anything, the font started working again today. I guess whatever problem existed, Google fixed it.
Upon further investigation, it seems their font for "Rubik" is corrupt or otherwise problematic. Conversion to ttf gives the same results. The font can be previewed under Windows, but the behavior in-browser (FF56.0b2) is the same.
Browsers that appear to render it might be doing what mine was, using a system fallback that looks similar.
This is an issue on their end as the problem is with the font file and not their stylesheet as I had originally stated in this answer.
I converted the woff to ttf using Google's woff2 tool, then tried the ttf version locally, without unicode-range and the results are the same. Here is a preview of the truetype version of the font, converted from the woff2 version, in FontForge, if anyone wants to see if the glyph's are in the correct location (note that this version of the font also doesn't work in-browser):
Google Fonts pushed an update with hinting that had a bug for some rendering systems, and rolled back the update within 24 hours.
If you remove the "/" after ".com" and add a space it worked for me. This font was working for me yesterday, so now the only problem is if they fix the path it wont work again. Hope this helps
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'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.
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 am using Google Font 'Righteous' and this shows fine on every browser on my Mac and PC. However my client has noticed that on his copy of Google Chrome the font is showing in a very odd fashion, look at the screenshot:
Does anybody know what could be causing this? Is it a browser issue or is it something that can be rectfied in the code or CSS?
The CSS is pretty basic:
h1, h2, h3, h4 { font-weight:normal; font-family: 'Righteous', cursive; }
As I said, in my version of Chrome it's fine! Any help much appreciated!
It's possible that the user has a font on his/her system called Righteous which is interfering, though I'm not sure how likely that is. And unless I'm blind, you haven't posted a link to it, so I can't really comment much. In response to #kubedan about the chrome console, that doesn't mean anything, just chrome complaining that google isn't sending the right HTTP Headers back with the font.