search

kjk / edna

Note taking for developers and power users
https://edna.arslexis.io
Other
391 stars 18 forks source link

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

Closed sphars closed 4 months ago

sphars commented 4 months ago

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:
Screenshot_20240702_214003

Desktop (please complete the following information):

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):
Screenshot_20240702_220345

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):
Screenshot_20240702_220446

kjk commented 4 months ago

thanks for the detailed info, was very useful!

sphars commented 4 months ago

@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 commented 4 months ago

Thanks for pointing this out, should be fixed.

kjk commented 4 months ago

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 commented 4 months ago

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