I know there are a lot of other questions regarding the "jagged" or "pixelated" fonts problem, but here's the weird thing, for me at least..
After building a site locally and testing in Firefox, the font loaded from Google Webfonts looked great. Almost Photoshop quality. It was only after I had tested the site in some other browsers, such as IE, Opera, Chrome and Safari, that when I returned to Firefox the font started to appear jagged.
I'm wondering if when I loaded up the other browser, it changed a setting somewhere on my PC. I have a AMD Advent Monza S150 with Windows 7.
I've also messed around with the ClearType option but still no luck. Can anyone shed any light on this?
More of a shot in the dark, than the real answer, but... one reason that could be that the font you are using on your website is installed on your PC. Google webfonts, and webfonts in general usually have the downside of looking good only with certain font sizes.
Related
I have my custom.css and inside this file I am using this Google Font #import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700); and until yesterday I was working fine in my Ubuntu 16.04 and Firefox version 88.0.
But today when I opened the website, the font color getting light like below.
The strange thing I have noticed is, its not happening with new Firefox versions (like versions above 100) in Ubuntu. Its also working fine in Google Chrome and in other browsers.
Its only happening versions below 100 or at-least in version 88.0 which I have in Ubuntu.
I have also researched and found out this thread https://github.com/vercel/next.js/issues/36986 which suggests me to replace the CSS with something like below which I did.
#import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=optimal);
But here I have noticed that this font name is not the same. I have Montserrat and here in the code it has Nunito. Additionally, when I refreshed the page, my web page menu also became bold. So I believe this is not working fine.
Can someone guide me how can I apply the same font which wont break my bold italic and other options like I already have.
Any help or guidance or support will be highly appreciated.
Thanks
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
Does any one know why some of my font families won't render on some mobile devices? Here's a page that demonstrates the fonts:
http://jl.evermight.com/font/
The fonts render properly on desktop chrome browser, ipad and iphone.
But when i view that page on my galaxy note, the Have A Nice Day font renders as something that looks like arial. On my friends nexus 4, Have a nice day works fine, but the universe condense renders as something that looks like arial.
Does anyone know why?
I've attached screenshot of what the fonts should look like
Additional notes
some people claim Have a nice day is not working in Firefox or IE10. For me, the font works on Firefox. I don't have IE10, so unable to verify.
How do I make this font work on my android?
Additional Notes
I had a typing mistake in my link path to my css files. I've corrected it now. But the problem still appears in my droid browser.
Just tried out the link on my phone - HTC 8s, everything seemed to work fine. Below is the screenshot for the same.
ON HTC 8S
ON IE 10
It's possible it's a downloading issue. The fonts listed in your declaration should work across most browsers (just make sure you're not in Opera Mini, it doesn't really support much of anything).
Additionally, Have a Nice Day is loaded through #font-face declarations in the CSS file, but the others appear to be loaded from the JavaScript, which might be part of the issue. Droid Sans is on Android phones by default, so they're likely just pulling them locally, which is why they work across the board on Android. From there, it might be a difference of JavaScript support (if Universe doesn't work, JS isn't turned on, for example).
Another thing that might help is opening up developer tools in a desktop browser that isn't working (in the case of Firefox, you'll want to pick up the Firebug extension). Check the "Net" or "Network" tab and see if your font files are getting downloaded.
If that still doesn't work, try playing around with the order of the font files in the declaration. I've seen browsers take issue with the order.
Also, the Droid Serif fonts are available from Google Web Fonts, which works cross browser with little headache. It might be worth seeing if your other fonts (or something close) are there, too, and just use Google's Web Font Loader to load your fonts.
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Below is a link to how I do my #fontfaces for cross browser compatibility.
Cross Browser Fontface
Hi,
I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by #font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.
The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).
So, I did try a few things:
Tried applying text-shadow. It made it seem a little better, but still pretty awful.
I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.
Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.
I don't really like that solution, but I will accept it if there is no other.
Thanks!
https://stackoverflow.com/a/9041280/1112665
If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.
I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.
Chrome 18.0.1003.1 dev:
Safari 5.1.2 (7534.52.7):
Firefox 9.0.1:
Opera 11.60 Build 1185:
Internet Explorer 9.0.8112 (under Parallels VM):
It looks like Windows 7 #font-face problems are quite common, and there are a lot of inconsistencies in general:
#Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
#font-face gotchas (http://paulirish.com/ - 2010/05/05 )
Font-face embedded fonts look fuzzy in Windows 7 browsers
#font-face rendering in Windows 7
You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.
Use a chrome specific media query and replace the font with the SVG version exclusively.
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
There seems to be a difference between Google webfonts and the same font downloaded from Font Squirrel, see this (unrelated...) question.
So I would try and use the version they have at Font Squirrel to see if that solves the problem.