allaboutdisil.wordpress.com font is thin Topic is solved

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
User avatar
Disil07
Moon lover
Moon lover
Posts: 76
Joined: 2021-03-31, 05:15
Location: Indonesia
Contact:

allaboutdisil.wordpress.com font is thin

Unread post by Disil07 » 2022-06-23, 08:26

First of all All About Disil is a blog of mine, so suggestions for my website are welcome.

My website looks weird in Pale Moon and any other UXP based browser (seamonkey is fine). Basically, the fonts are thin as heck, to the point where it is not readable. This is how it look in other browser (edge, ie, ff):
Image
But in Pale Moon it look like this:
Image

Is there anything I can do to make it look normal (not super thin like the 2nd image)? I have tried them in safe mode/new profiles, but none worked. This is the link to the blog in case you guys wanna test how it looks too.
Debian 12 Bookworm - KDE Plasma 5.27
Intel Celeron N5100 - 4 gigs of RAM - 256 gigs of SSD

I can barely speak english, so bear that in mind when talking to me

User avatar
Night Wing
Knows the dark side
Knows the dark side
Posts: 5151
Joined: 2011-10-03, 10:19
Location: Piney Woods of Southeast Texas, USA

Re: allaboutdisil.wordpress.com font is thin

Unread post by Night Wing » 2022-06-23, 09:31

When I clicked on your link and the page came up, the page rendered properly since it does not look "thin" as your's does in your second image . It looks like the first image.

At this time, I'm using 64 bit linux Pale Moon 31.1.0 running in 64 bit linux Mint 20.3 (Una) Xfce. The only extension I'm using is uBlock Origin which is enabled and a lightweight theme named, "Moonscape".
Last edited by Night Wing on 2022-06-23, 14:07, edited 1 time in total.
Linux Mint 21.3 (Virginia) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox
MX Linux 23.2 (Libretto) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox
Linux Debian 12.5 (Bookworm) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox

User avatar
Disil07
Moon lover
Moon lover
Posts: 76
Joined: 2021-03-31, 05:15
Location: Indonesia
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Disil07 » 2022-06-23, 10:24

I just tried to load the site on safe mode again, and it works properly. But if i use a new profile (non safe mode, and not altered) it would display like the 2nd images.

Is this driver issues? I have latest W11 with Celeron & Intel UHD graphics (with updated driver). 4gb ram btw.
Debian 12 Bookworm - KDE Plasma 5.27
Intel Celeron N5100 - 4 gigs of RAM - 256 gigs of SSD

I can barely speak english, so bear that in mind when talking to me

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by FranklinDM » 2022-06-23, 14:00

Confirmed.

I'm not sure, but I'm suspecting that something changed on Google's side, particularly with the 'Montserrat' font. AFAICT, this Wordpress theme relies on Google Fonts for their copy of the font. For some reason, the 400-font-weight version is always used regardless of the specified font weight, at least, on Windows. If I prevent Google's copy from loading and force the system-installed 'Montserrat' font to be used, there's no rendering issues.

I have an old project that also relies on Google Fonts with the same font family (Montserrat). I've tested this old project extensively in the past with Pale Moon 29 and it used to render the fonts fine. However, upon testing now, with the latest versions of Pale Moon 28, 29, and 31, the font rendering has also become thin.

For comparison, I'm currently running a machine with Windows 10, a Ryzen 4000 series CPU, AMD iGPU, and 16 gigs of RAM.

User avatar
Disil07
Moon lover
Moon lover
Posts: 76
Joined: 2021-03-31, 05:15
Location: Indonesia
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Disil07 » 2022-06-24, 02:02

I changed my website fonts. This fixed the problem, but im still confused because the page (with Montserrat) does actually work fine in safe mode but not in a fresh profile.
Debian 12 Bookworm - KDE Plasma 5.27
Intel Celeron N5100 - 4 gigs of RAM - 256 gigs of SSD

I can barely speak english, so bear that in mind when talking to me

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35477
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Moonchild » 2022-06-24, 15:15

Safe mode disable hardware accelerated font drawing. A new profile does not. If a font has bad interaction with Direct2D and ClearType like Google's Montserrat "update" does (most likely due to bad kerning or similar) then it would not show in safe mode but would show in an otherwise fully accelerated new profile.

Please relay your experiences to Google as well.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by FranklinDM » 2022-07-09, 09:55

An update - I think I've found a fix for this.

Set a user agent for the fonts.googleapis.com subdomain by setting the following preference:

Code: Select all

general.useragent.override.fonts.googleapis.com
With this value (Firefox 61):

Code: Select all

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.9) Gecko/20100101 Firefox/61.9
Google serves a different set of fonts for Firefox versions higher than 61.9, which for some reason, behaves differently. I'm not sure if there's a specific CSS feature that we're currently missing, but for comparison, I've attached the CSS files (renamed because it cannot be uploaded as-is with the .css file extension) which contain the @font-face rules for the Red Hat Display font, also affected, and links to the WOFF2 fonts.
Attachments
bad_ff62.css.txt
(4.57 KiB) Downloaded 7 times
good_ff61.css.txt
(4.77 KiB) Downloaded 6 times

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35477
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Moonchild » 2022-07-09, 10:19

They are serving physically different fonts based on user-agent; obviously using some quirk of Firefox's rendering to cater to it, and as a result being problematic on non-Gecko. Bastards! No, this has nothing to do with a css feature -- the css is exactly the same in both cases, so the only thing different is the different actually-served font file.
OK I'll be adding this override to GoogleAPI's font service. Thanks for digging into it, Franklin.
(also added to the dynamic update -- should propagate in a day or so, "magically" fixing already-installed versions)

Unfortunately this won't fix it for the "Montserrat" font which remains anaemic and just seems to be very broken.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by FranklinDM » 2022-07-09, 11:07

I did some more digging and I've found that the problem seems to be with font-variation-settings (bug #1321022) and possibly "Variable Fonts" in general (bug #1302685). AFAICT, they might be storing all the different font weight variations in the "Light" font. I was able to reproduce this with the latest version of Firefox by disabling its support for font variations.

For the Montserrat font, it might be a caching issue or something else on Google's side. I've tested this again with my old project that uses Google Fonts' Montserrat and it appears to render just fine now.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35477
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Moonchild » 2022-07-09, 11:14

css font-variation-settings isn't actually used in the CSS though. If it was I'd have pointed that out. We have a parser implementation for it but it doesn't actually do anything to the fonts because that kind of low-level font tweaking is hardly something you'd need a web browser to do. Of course if their "redesigned" fonts default to the thinnest weight possible in their "variable font" internal font tables, then it's rendered as such -- because that would be the base font, not a variation. That does mean that the font file itself is incorrect in that it uses the wrong base weight for the font-with-variants.
I don't know in what way fonts can be "variable" otherwise. Google is obviously still supplying different font files for different weights and styles, so what needs to be "variable" about them in that case?
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by FranklinDM » 2022-07-09, 11:22

Moonchild wrote:
2022-07-09, 11:14
Google is obviously still supplying different font files for different weights ...
In the CSS files that they serve to the latest version of most Chrome clones and in Firefox 62 and higher, this isn't the case anymore. In the bad_ff62.css.txt that I've attached earlier, they're now linking to the same font file for different weights of the italic and normal font style. I've removed some properties and rules for demonstration.

Italic latin-ext

Code: Select all

/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6tTY_9CQ.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6tTY_9CQ.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6tTY_9CQ.woff2) format('woff2');
}
Normal latin

Code: Select all

/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6h.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6h.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v12/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6h.woff2) format('woff2');
}

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35477
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: allaboutdisil.wordpress.com font is thin

Unread post by Moonchild » 2022-07-09, 11:32

Hmm. So ultimately this is a Google server bandwidth consideration only then, shifting the workload to the client. I'm still not sure why this is necessary because the browser itself already does fine adjusting weights itself; that is part of the CSS spec, after all. Also keep in mind that a 100 point difference in weight does not require a different font, per se, since they tend to be roughly divided in ranges where normal weight adjustment doesn't cause problems. This is a corner case use, if you look at it. Supplying different physical fonts for different weights is already an edge case where normal scaling would potentially cause issues for the display of the font. Abusing the font variants to make weight changes is bad, because it's not a variation to the font shape (which is what font variants are for). So here we have a perfect storm of conflicting use: weight specified but overridden by the font file, requiring an "undo" through font tweaking to get back to a semblance of normality.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked