Issues with fonts (on Firefox) black bold

Hi everyone,

I have been having some issues getting my fonts to work on my NixOS machine. I am trying to set up it mostly through home-manager and stylix. It seems to be mostly working fine, but on some pages in Firefox I see some weird rendering. Characters (only noticed with numbers) with weird spacing (and bold and black).

Weirdly enough, it seems to happen when the fallback font is like “monospace” in the CSS however if I remove the quotes and leave it as just monospace it works fine. I have noticed the same issue with sans-serif as well.

NixOS part: modules/nixos/styles/stylix/default.nix · sc-74 · Haseeb Majid / nixicle · GitLab Home Manager: modules/home/styles/stylix/default.nix · sc-74 · Haseeb Majid / nixicle · GitLab

Any help would be greatly appreciated. Thanks!

Normally looks like: Imgur: The magic of the Internet

After editing the CSS: Imgur: The magic of the Internet

this ended up being some config I had copied

It is rendering the emoji font where there is a character i.e. the numbers hence it looks bold. I removed the following config and it all is working now it seems.

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <alias binding="weak">
        <family>monospace</family>
        <prefer>
            <family>emoji</family>
        </prefer>
    </alias>
    <alias binding="weak">
        <family>sans-serif</family>
        <prefer>
            <family>emoji</family>
        </prefer>
    </alias>
    <alias binding="weak">
        <family>serif</family>
        <prefer>
            <family>emoji</family>
        </prefer>
    </alias>
</fontconfig>

MR Fixing it in my config: fix: [sc-74] Fix fonts (!255) · Merge requests · Haseeb Majid / nixicle · GitLab