Font issue on the documentation website.

[dino8890]

There is some kind of font/text issue on the Wagtail docs, see screenshot below:

Whitespace character is unusually wide, however HTML does not show anything out of the ordinary:

<p>Multi-site is a Wagtail project configuration where c...

[lb-]

Hey. Could you provide any more details?

What browser/ OS ?

What exact URL (just in case you are somehow on a different version of the docs)?

Have you tried incognito/private mode (might be a plugin)

I am not able to reproduce this issue (was on the docs this morning).

[dino8890]

Hello, sorry it's still morning here and I haven't had my coffee yet hah.

The issue appears on Firefox 107 running on Solus Linux 4.3 (incognito or not). Google Chrome 101.0.4951.64 does not have this issue.

Only documentation for versions latest, stable, 4.1.1, 4.0.4, and 4.0.3 are affected. 3.0.3 is not affected, nor are the earlier versions.

Happens on this page, as well as any other: https://docs.wagtail.org/en/stable/advanced_topics/multi_site_multi_instance_multi_tenancy.html

[lb-]

Ok - maybe it's a default / system font issue.

Could you try to grab a screenshot with the styles inspector open in Firefox. Just to see what font it's actually using.

You may need to take the screenshot of the 'computed' font family also.

[dino8890]

Indeed, it seems like a font availability issue. Here's the tabs for version 4:

Fonts:

Computed

And then for version 3:

Fonts

Computed

[lb-]

Ok.

I'm going to move this to the Sphinx theme repo - looks like this broke via https://github.com/wagtail/sphinx_wagtail_theme/pull/194

We will need to maybe find another font to add to the font set.

Just curious @dino8890 - does the Wagtail admin look ok? I think it uses the same font family set.

[lb-]

Wagtail admin UI fonts for reference - https://github.com/wagtail/wagtail/blob/main/client/src/tokens/typography.js

[dino8890]

Wagtail admin is okay, it falls back to Noto Sans. The blank space issue is caused by rendering whitespace using Noto Color Emoji font for whatever reason.

[thibaudcolas]

Hi @dino8890, could you share what fonts you have configured in Firefox, Chrome, and at the OS level? For Firefox in particular, do you have it enabled to allow pages to set their own custom fonts?

I can reproduce what you describe but only when forcing the page to render text using Noto Color Emoji. We have sans-serif in our font stack – the emoji fonts would normally only be used when attempting to display characters missing from the base latin fonts, so I’d suspect this is a browser bug or configuration issue we can’t do much about it.

[dino8890]

Hello, by default both Firefox and Chrome use Clear Sans as default sans-serif font. Websites are allowed to use their font preferences in Firefox. Chrome renders docs with Noto Sans despite the default font being Clear Sans. I don't know how browser choose their fonts exactly, but it seems to me like it should use Clear Sans.

I do have Roboto font installed which is explicitly set as a preference in the sphinx theme, but it is not used in Firefox or Chrome. Seems to me like this is an issue with Firefox so I'll file bug report with my package provider.

Thank you all!

Edit: Another interesting point, Wagtail admin is rendered with Noto Sans in both FF and Chrome, but not in the documentation. Curious.

[thibaudcolas]

👍 it’s indeed very strange. This is my understanding of how a font is picked from our stack, based on what you said:

• I’d expect Noto Sans to be your OS-level default font, which we reference in our font stack via system-ui.
• Roboto is after that so would only be used for platforms that don’t support system-ui.
• Your browser-configured font (Clear Sans) would only apply if sans-serif was reached in the stack.

So back to Firefox, I really don’t see how it’d reach the very end of the font stack, and why that’d be specific to docs.wagtail.org.