allaboutdisil.wordpress.com font is thin Topic is solved
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:
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:
- Clear any current output
- Navigate or refresh the page in question
- Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
allaboutdisil.wordpress.com font is thin
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):
But in Pale Moon it look like this:
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.
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):
But in Pale Moon it look like this:
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
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
- Night Wing
- Knows the dark side
- Posts: 5173
- Joined: 2011-10-03, 10:19
- Location: Piney Woods of Southeast Texas, USA
Re: allaboutdisil.wordpress.com font is thin
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".
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
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
Re: allaboutdisil.wordpress.com font is thin
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.
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
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
- FranklinDM
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
- Contact:
Re: allaboutdisil.wordpress.com font is thin
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.
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.
Re: allaboutdisil.wordpress.com font is thin
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
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
Re: allaboutdisil.wordpress.com font is thin
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.
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
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
- FranklinDM
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
- Contact:
Re: allaboutdisil.wordpress.com font is thin
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:
With this value (Firefox 61):
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.
Set a user agent for the fonts.googleapis.com subdomain by setting the following preference:
Code: Select all
general.useragent.override.fonts.googleapis.com
Code: Select all
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.9) Gecko/20100101 Firefox/61.9
- Attachments
-
- bad_ff62.css.txt
- (4.57 KiB) Downloaded 7 times
-
- good_ff61.css.txt
- (4.77 KiB) Downloaded 6 times
Re: allaboutdisil.wordpress.com font is thin
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.
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
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
- FranklinDM
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
- Contact:
Re: allaboutdisil.wordpress.com font is thin
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.
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.
Re: allaboutdisil.wordpress.com font is thin
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?
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
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
- FranklinDM
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
- Contact:
Re: allaboutdisil.wordpress.com font is thin
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');
}
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');
}
Re: allaboutdisil.wordpress.com font is thin
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
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite