Some Japanese characters are printed oddly

[tsawada]

Steps to reproduce

1. send a text that contains "の" (a Japanese character)

Outcome

What did you expect?

The glyph of "の" is displayed as the same style as other Japanese characters.

What happened instead?

The glyph of "の" look different from other Japanese characters.
If I try to simulate this in English: ţexţ looks like ţhis.

I figured out that this glyph is coming from STIXGeneral font, which somehow contains a glyph for "の" but not for other characters (there could be more). I'm not sure if STIX intentionally included "の".

Operating system

macOS

Browser information

Google Chrome, latest

URL for webapp

app.element.io

Application version

Element version: 1.11.15 Olm version: 3.2.12

Homeserver

No response

Will you send logs?

No

[tsawada]

I am no expert in the topic but my understanding is that STIXGeneral is deprecated, and should be replaced with STIX Two or other fonts.
On my browser, Element seems to refer STIXGeneral in theme-dark.css (similar for the light theme as well) but I can't find relevant location in the source tree.

[robintown]

This would be because Japanese characters are supposed to fall back to sans-serif, but STIXGeneral is prioritized over sans-serif. I would expect the order to be the other way around.

[robintown]

This is apparently still an issue on some font stack + browser combinations. We probably need to remove STIXGeneral from the font list entirely, since it's doing exactly this: matrix-org/matrix-react-sdk#8687 (comment)