Bug: Font doesn't fallback to monospace when set font can't be found

[sphars]

Describe the bug
The default Cascadia Code font is not included on my OS (Fedora 40). Since the fonts are not provided as part of the application, my fonts fall back to my browser's default font (in my case a serif font). There is also no fallback to monospace in the font-family CSS rule so I'm stuck with a serif font, which is hard to use.

Issue is present on both Firefox and Chromium.

To Reproduce
Steps to reproduce the behavior:

1. Open the application
2. See that the font is not a monospace font
3. Try to change font in Settings but only Cascadia Code is available

Expected behavior
Font to gracefully fallback to a monospace font.

Screenshots
Screenshot from Firefox on Fedora 40:

Desktop (please complete the following information):

• OS: Fedora 40
• Version 1.9.1

Additional context
Looks like you're aware of this limitation per this line. Just to test it out, I cloned the repo and ran it locally. I was able successfully fallback to my system's default monospace font by changing this

export let kDefaultFontFamily = platform.isMac ? "Menlo" : "Cascadia Code";

to

export let kDefaultFontFamily = platform.isMac ? "Menlo, monospace" : "'Cascadia Code', monospace";

Screenshot with font fallback to Noto Sans Mono (my OS's default monospace font):

Additionally, having the font name surrounded with single quotes ' will address #19. Confirmed on my end by changing 'Cascadia Code' to 'Source Code Pro' (a font installed on my OS):

[kjk]

thanks for the detailed info, was very useful!

[sphars]

@kjk Thanks for the change. I just tested the latest version, deployed and locally, and the fallback doesn't work, I'm still getting my OS's serif font. I saw in your commit that you used a semicolon in

fontFamily = `'${fontFamily}'; monospace`;

to separate the font names. If you change that semicolon to a comma, like

fontFamily = `'${fontFamily}', monospace`;

it'll work. See the font-family CSS rule.

As an aside, if you wanted to include a specific font that will work for everyone offline, you could add it to your web app bundle. I personally use Fontsource to get Google Font packages. These can be added to your web app output so that the app will still work offline and not have to reach out to Google's servers. GF doesn't have Cascadia Code or Menlo fonts (those would be good as fallbacks, as long as monospace is the last one in the list) but perhaps there's an alternative font you'd like 🙂

Again thanks for your work on Edna!

[kjk]

Thanks for pointing this out, should be fixed.

[kjk]

Heynote was bundling Hack and Open Sans font but I decided that fast startup is more important (even when bundled, custom fonts need to be loaded and parsed, which increases startup type).

I could tweak the fallback for Linux, but don't know what a good font for that would be. llms tell me Monaco, Consolas, Inconsolata, Fira Code, Source Code Pro

[sphars]

That's understandable, regarding startup time.

I also asked an LLM (claude.ai) and it suggested this as a monospace font stack:

font-family: "Cascadia Code", "Consolas", "Menlo", "Monaco", "Liberation Mono", "Courier New", monospace;

I can confirm that my install of Fedora has Liberation Mono, and that's what it fell back to using that stack. You're right though, when it comes to Linux it could be anything.

Edit: Another potential font stack: https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#monospace-code