Obsidian.md and Publish websites' fonts not rendering correctly for some people (like me!)

[kauffy]

Steps to reproduce

Using Firefox 99.
I go to Index - Obsidian Help on the obsidian.md website. I could also go to a Publish website and get the same result.

Expected result

Expected result is that the page will render normally, and not with the wrong (and terrible font) it is rendering with for me.

Actual result

The page is rendering using a comically large, very wide, and outline-only font, making the page very difficult to read.

Environment

• Operating system: Windows 10 19044, Firefox 99 (up-to-date as of this writing)

• Debug info: N/A (this is a browser problem with the website)

---

Additional information

So, I worked through this with Damian Korcz, and we drilled down to the problem being in:

--font-default

The list that’s there:

var(--default-font, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif)

Will cause this issue on my Firefox (but not that of other people, for some reason-- and, yes, we did try it incognito and with add-ons turned off).

If the line is altered by simply adding a comma at the end-- or alternately, deleting the redundant sans-serif at the end and leaving the comma! then it will instantly turn normal. A few other alterations fix it, also.

var(--default-font, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light",

[WhiteNoise]

I can’t reproduce this problem. I think you should send this report to Mozilla.

[Licat]

I’ve made some changes to the font list. Please reload the help site and let me know if this fixes the problem!

[kauffy]

Looks like that didn’t affect it.

Try deleting the SECOND appearance of sans-serif at the end of the list.

[Licat]

Hmm now that you mention it, there does appear to have two copies of it. However I still think having sans-serif last makes more sense? What do you have your Firefox’s sans-serif font set to in config?

[kauffy]

For whatever reason (I don’t know how any of this works) deleting the first sans-serif doesn’t solve the issue, but I do agree with you that it makes sense as the final fallback.

In my case, as you can see, my sans serifed font is not the wacky Star Trek one I’m getting.

If I uncheck “Allow pages to choose…”, then I get my preferred fonts instead of this (as yet) unidentified font.

[kauffy]

It seems to like when the list ends like this:

If I take away that comma, or have anything written after it, it barfs again.

[kauffy]

If I surround your new list on the help site with ()'s, then it works. Without the ()'s, it doesn’t work.

--font-default: ('Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif);

[WhiteNoise]

Licat’s syntax is corrent.

I think the problem is in your system.

[kauffy]

Clearly, it’s some combination of the two things. I am an edge case, or you’d have heard of this happening before (probably). But I did see one other person on (I think) Discord, with a similar complaint.

The only thing I can think of is that I have a huge number of fonts on my system (~4000, I think), and perhaps some font I have is matching something in that list rather than the font intended. The argument against it is that simply adding parens to it resolves it, as does not altering the content of the list, but merely adding a comma at the end, or deleting the --default-font at the start.

[WhiteNoise]

@kauffy

The only thing I can think of is that I have a huge number of fonts on my system (~4000, I think), and perhaps some font I have is matching something in that list rather than the font intended.

This is the problem. Likely Inter.

@kauffy

The argument against it is that simply adding parens to it resolves it, as does not altering the content of the list, but merely adding a comma at the end, or deleting the --default-font at the start.

No. Adding parentesis, simply means generating a syntax error that causes firefox to fallback to its default font.

[kauffy]

@WhiteNoise

This is the problem. Likely Inter.

I’ve already checked, and I do not have Inter on my system. I went through the list and deleted each font listed, one at a time, and it had no effect. Really weird.

@WhiteNoise

No. Adding parentesis, simply means generating a syntax error that causes firefox to fallback to its default font.

Odd. It had parens around it before this change.

[WhiteNoise]

what do you get here? What is the font actually used?

[kauffy]

Hah!! I wasn’t far off in describing the font as “Star Trek”

No idea why that font would be put in the mix. I just deleted the Hollow version, and then it gave me the Solid version (the next font in the fonts folder).

[spanrucker]

I’m having this problem too, firefox 100 on Mac Big Sur, with an even wackier font!

Have you made any progress on figuring out why this happens?

[Licat]

I’ve deployed another change that may possibly affect how it looks, can one of you clear cache and reload to see if that did something?

[spanrucker]

yep this seems to have fixed it, thank you!