Fonts on Various Sites Are Too Heavy/Bold
I've tried to search and found some other posts about this, but not a ton... leading me to believe there is something wrong.
Issue: Fonts on some sites are too heavy/bold (vs appearing correctly on Chrome/Chromium browsers) Environment: Windows 10 or 11, Firefox stable (currently 105.0.1) Example site: https://www.subaruoutback.org (this is not the only one, just an example) Workaround(s): I can do one of two things... I can either enforce browser fonts globally, which fixes the issue but then also break some sites in other ways or I can use an add-on to let me selectively enforce browser fonts as needed (which is what I am doing).
Screenshots attached, this is my experience on multiple PCs (Windows 10 and 11). One image is from Firefox, one is from Chrome.
On some sites, it isn't a huge deal... maybe just looks bad but is functionally fine. On some sites the issue is more impactful and actually creates readability issues.
Of course I can continue to work around the issue, but ideally I would like to fix it.
I did read that there are some changes site owners can make for font handling, but obviously requesting that sort of thing isn't realistic in a general sense.
Thank you!
Giải pháp được chọn
Ok, I fixed it... with the tips above, I did notice that every site with this issue was using Helvetica in some fashion. In Chrome... without Helvetica installed on the system, Arial is used. Good. In Firefox, without Helvetica installed, it just ends up looking crazy and too heavy.
I installed the Helvetica family of fonts on my system and now all those sites look fine.
Feels not good that Firefox doesn't fall back to a configured and available font, but... it's fixed for me so I won't worry about it.
Đọc câu trả lời này trong ngữ cảnh 👍 0Tất cả các câu trả lời (4)
I'm not a Firefox expert here, but I am a UI developer. So hope this helps.
Chrome and Firefox do render fonts differently, since they have different rendering engines. Also, the site you sent is using bold fonts. The fonts used are: first choice Helvetica, or if not available Arial, or if not any sans-serif available. If you're using Suse I don't think Helvetica and Arial are included by default. I don't know, maybe it depends on the distro.
The CSS specifies a font with 700 weight too, which is a setting for a kind of Black font weight, which is bolder than regular bold.
Also, in the settings go search for Fonts. There's a config there that allows you to change the default font and then there's and "Advanced..." button. Press on it and there you can select which font is your default Sans-Serif. It will probably be a different font than what Chrome is using.
This website specifies Helvetica fonts in some cases.
- font-family: helvetica neue,Helvetica,Arial,sans-serif;
What font is used in your case ? Is that already a bold font ?
You can right-click and select "Inspect" to open the built-in Inspector with this element selected.
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
cor-el said
This website specifies Helvetica fonts in some cases.What font is used in your case ? Is that already a bold font ? You can right-click and select "Inspect" to open the built-in Inspector with this element selected. You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
- font-family: helvetica neue,Helvetica,Arial,sans-serif;
So this was helpful in figuring out the why, I think... so in Firefox the steps you gave me show that Helvetica-Black is rendered where in Chrome it seems that it's Arial Bold.
I am not exactly sure where to go/what to do with this info, but it at least gives some understanding.
As I said, it's definitely not just that site (it's many sites), that was just an easy example.
Giải pháp được chọn
Ok, I fixed it... with the tips above, I did notice that every site with this issue was using Helvetica in some fashion. In Chrome... without Helvetica installed on the system, Arial is used. Good. In Firefox, without Helvetica installed, it just ends up looking crazy and too heavy.
I installed the Helvetica family of fonts on my system and now all those sites look fine.
Feels not good that Firefox doesn't fall back to a configured and available font, but... it's fixed for me so I won't worry about it.