Debugging Steps

This occurred off and on over the course of a few weeks. My font setup was primarily done using stylix and a bit of NixOS option config.

I noticed this only seemed to happen when the CSS on the page include a font-family like so “monospace” i.e. the monospace font in quotes. But without quotes, the font would render fine.

I made a few posts to ask for help, as I was confused, why this was happening, and found a similar issue, you can find here: https://old.reddit.com/r/NixOS/comments/1fha5hl/firefox_font_problem/.

Anyway, I didn’t get any reply, so I decided to use fc-match to see what font my system was returning.

blog on  2025-01-20-how-to-fix-firefox-rendering-emoji-font-black-bold-numbers-issue [$?] via 🐹 v1.22.10 via ❄  impure (nix-shell-env) took 19s
❯ fc-match monospace
MonoLisa-Regular.ttf: "MonoLisa" "Regular"

blog on  2025-01-20-how-to-fix-firefox-rendering-emoji-font-black-bold-numbers-issue [$?] via 🐹 v1.22.10 via ❄  impure (nix-shell-env)
❯ fc-match '"monospace"'
NotoSans[wdth,wght].ttf: "Noto Sans" "Regular"

I thought I’d found the smoking gun, ohh it was trying to use the San font to render it. I asked someone to share their working config from an Ubuntu machine and theirs also seemed to be similar to mine.

╰─ fc-match "monospace"
DejaVuSansMono.ttf: "DejaVu Sans Mono" "Book"

╰─ fc-match '"monospace"'
DejaVuSans.ttf: "DejaVu Sans" "Book"

Then whilst looking up stuff specific to how Firefox renders fonts, I realised in the DevTools there is a page for fonts, it’s just a bit hidden. I mean, it makes sense, of course there is.

So looking at this I realised it wasn’t bold text it was rendering, but it was falling back and rendering the numbers as emojis.

I then had a closer look at my font config in Nix and realised it wasn’t doing what I thought it was doing.

<?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>

What I had done by copying and pasting some config I didn’t fully understand (tut tut tut) is if the character was available in the emoji font use that instead, i.e. the numbers or certain symbols like TM. So after deleting that config and reloading Firefox, it was rendering properly as expected.

That’s it! As expected, remember, to make sure you understand what your code is doing. I thought it was allowing emojis to be rendered with the monospace font, not replacing it or preferring it.

Relevant commit resolving the above issue: https://gitlab.com/hmajid2301/nixicle/-/commit/3168db8df339d79e838c98f8675eb21a23452d4e

Recently, I had an issue with my Ubuntu laptop running Hyprland, when running Firefox it had this ugly border around it. Which looked something like this:

You can see a weird border around the browser, and if you try to view some of the context menus, they appear small and difficult to read.

Fix

As per this Reddit thread ¹. There are two fixes, one upgrade to version 0.33 which I could not easily do with Ubuntu. So I used the other fix,

• Right click on title bar
• Select Customize Toolbar..
• Then check Title Bar
  • You may have to full-screen the app to make it easier to select the title bar

Hyprland Version

hyprctl version
Hyprland, built from branch HEAD at commit 5b8cfdf2efc44106b61e60c642fd964823fd89f3  (props: bump ver to v0.31.0).
Tag: v0.31.0

flags: (if any)
debug

But the question arises how can we debug our app on a smartphone? One way to achieve this is to use Firefox and remote debugging, you will need to connect your smartphone via USB to your device running the SvelteKit app i.e. your Laptop.

SmartPhone

On your phone make sure you have developer mode on and have switched on USB debugging ¹. Open up Firefox, then click on the 3 dots to open up the context menu go to Settings, scroll down and check Remote debugging via USB to “on”.

Next, connect your smartphone to your PC via USB.

PC

On your PC start up your SvelteKit application for example npm run dev -- --host --port 5173 --open. Where dev is vite dev in my package.json. This will start the app but --host will mean it is accessible to devices on the same private network:

> bookmarkey-gui@0.0.1 dev
> vite dev --host --port 5173 --open

  VITE v4.0.1  ready in 701 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.26:5173/
  ➜  Network: http://10.121.2.243:5173/
  ➜  Network: http://172.24.0.1:5173/
  ➜  press h to show help

This means we can connect to our PC on http://192.168.0.26:5173/ from our smartphone and access the SvelteKit site. You may want to set up your firewall such that only your smartphone can connect to your PC. In my case, since I am only developing at home I have allowed all traffic on port 5173.

Firefox

Now on your PC still:

• Open Firefox
• Go to about:debugging
• You should see your device under USB enabled.
• Select connect
• Click on your phone
• Then select your SvelteKit app to inspect