Using Firefox 132.0.1 on openSUSE Tumbleweed 20241111, all text Bugtracker appears with huge gaps between all words, making the text barely readable.
Screenshot:
The culprit seems to be the Font 'Segoe UI Emoji', once I remove it from the body's font property, the spacing is back to normal.
That's a bug in Firefox. Chromium doesn't exhibit the problem. I have problems with fonts in Firefox on many different websites.
I'm using the following Violentmonkey script to monkey patch the CSS:
// ==UserScript==
// @name Fix font issue on dev.gnupg.org
// @namespace Violentmonkey Scripts
// @match https://dev.gnupg.org/*
// @grant none
// @version 1.0
// @author -
// @description 6/20/2024, 1:54:23 PM
// ==/UserScript==
(function() {
'use strict';
// Remove 'Segoe UI Emoji' from body font style because it causes large spacing between words and weird digits
var style = document.createElement('style');
style.innerHTML = 'body, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], div.jx-tokenizer-container { font:13px "Segoe UI","Segoe UI Symbol","Lato","Helvetica Neue",Helvetica,Arial,sans-serif; }';
document.head.appendChild(style);
})();This website uses this CSS rule for body:
font: 13px 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
If 'Segoe UI' is unavailable, it tries to render all text with the Emoji font. The Emoji font does not have matches for a-z, but for numbers and for spaces, that's why it looks so bad. Shouldn't instead 'Segoe UI Emoji' (and 'Segoe UI Symbol') moved back behind sans-serif? That allows rendering text with and available font and uses the emoji font for everything else.
The same CSS has worked for years. Suddenly, after an update Firefox started to misbehave. I don't know if it's actually a bug in Firefox or in fontconfig or something else, but it's certainly not a problem of the CSS.
fontconfig resolves the fonts as follows (on my Tumbleweed; I don't have any Segoe UI fonts):
$ fc-match "Segoe UI" Cantarell-VF.otf: "Cantarell" "Regular" $ fc-match "Segoe UI Emoji" NotoColorEmoji.ttf: "Noto Color Emoji" "Regular" $ fc-match "Segoe UI Symbol" Cantarell-VF.otf: "Cantarell" "Regular"
Interestingly, Noto Color Emoji seems to be the second best match for Segoe UI:
$ fc-match -s "Segoe UI" | head Cantarell-VF.otf: "Cantarell" "Regular" NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
If Firefox would use the first match returned by fontconfig then there wouldn't be a problem. On many other websites Firefox insists on using a non-scalable bitmap font as replacement for a missing primary font so that all texts look pixelated. This just confirms my belief that Firefox is to blame.