Discourse font rendering

[kcahtoor]

Hello,

I’m running into a font rendering issue while using a custom Urdu font i.e. Jameel Noori Nastaliq (a variant of Noto Nastaliq Urdu) in Discourse. My setup is:

• Browser: Chrome Version 138.0.7204.183

• Font: Jameel Noori Nastaliq

• Platform: Discourse (I am using theme component following this)

Problem

When I apply Jameel Noori Nastaliq to Discourse, the text does not render as expected:

• Certain words are shaped incorrectly. In the attached image, the text on the right shows how Discourse currently renders it, whereas the left shows the expected rendering (using the same font and browser).

• Other urdu fonts (non-Nastaliq) display correctly in the same environment.

• Additionally, Noto Nastaliq Urdu renders with an unusually large font size compared to other fonts. This makes the text appear oversized and inconsistent with the rest of the UI.

What I’ve Tried

• Testing multiple Nastaliq fonts: All Nastaliq fonts i.e. Jameel, Mehr and Noto has this issue.

• Comparing with different browsers: (tested on Firefox/Edge)

• Verifying CSS overrides: The font is correctly applied via @font-face and loaded by Discourse.

Expected vs Actual

• Expected: Correct Nastaliq ligatures and proportional sizing (see left side of image).

• Actual: Broken word shaping and oversized text (see right side of image).

Has anyone else run into this issue with Noto Nastaliq Urdu on Chrome + Discourse? Is this a Chrome shaping bug, a font issue, or something in the way Discourse handles custom fonts?

Thanks in advance for any guidance.

[nat (Natalie T)]

There’s a chance Discourse is doing something to the fonts with regards to font weights.

Are you familiar with css? You may be able to tweak some of the font weight variables defined in Styling Discourse with variables: Show & Tell in a theme component.