# Discourse font rendering
**URL:** https://meta.discourse.org/t/discourse-font-rendering/378897
**Category:** Support
**Tags:** rtl
**Created:** [August 16, 2025, 10:28pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897 "2025-08-16T22:28:32Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [August 16, 2025, 10:28pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/1 "2025-08-16T22:28:32Z")
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](https://fonts.google.com/noto/specimen/Noto+Nastaliq+Urdu)) in [Discourse](https://discourse.mfgbhatti.com/). My setup is:
- **Browser:** Chrome Version 138.0.7204.183
- **Font:** Jameel Noori Nastaliq
- **Platform:** Discourse (I am using theme component following [this](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459))
### 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.
---
### Author:  [@nat](https://meta.discourse.org/u/nat)
#### Post date: [August 17, 2025, 5:10am UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/2 "2025-08-17T05:10:50Z")
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](https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614) in a theme component.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [August 18, 2025, 8:47am UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/3 "2025-08-18T08:47:19Z")
yes, I think it’s mainly the bolding that’s causing the distortion.
Either turn off all the bold fonts with a global overrule, or make sure that the font you’re using has a specific bold variant.
I read that this one might work betterr: [Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts](https://urdufonts.net/fonts/jameel-noori-nastaleeq-kasheeda)
---
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [August 18, 2025, 8:37pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/4 "2025-08-18T20:37:01Z")
@chapoi Thank you for the reply. I will go on to turn off bold fonts. how do you rekon will be easier to do it?
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [August 18, 2025, 8:55pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/5 "2025-08-18T20:55:00Z")
> [@kcahtoor](#):
>
> I will go on to turn off bold fonts. how do you rekon will be easier to do it?
Hmm, to be very thorough, adding this to your custom css should work:
```plaintext
* {
font-weight: normal !important;
}
```
---
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [August 18, 2025, 9:09pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/6 "2025-08-18T21:09:07Z")
> [@chapoi](#):
>
> ```plaintext
> * {
> font-weight: normal !important;
> }
>
> ```
@chapoi Unfortunately this is not working. What do you think about
```plaintext
overflow-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;
```
These three are common to these words
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [August 19, 2025, 7:07am UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/7 "2025-08-19T07:07:55Z")
None of those will do anything for your font.
I tried my solution locally, and that seemed to do the trick. Are you saying the css is not getting applied, or it doe get applied but doesn’t solve the problem?
---
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [August 19, 2025, 8:15pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/8 "2025-08-19T20:15:52Z")
@chapoi thank you. What I want to say that CSS rule is applied but it is not producing desired effects. Below are the links for you to reproduce what I am experiencing
```plaintext
/* Jameel Noori Nastaliq v4 */
@font-face {
font-family: "Jameel-Noori";
src: url("https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2"),
url("https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2");
}
```
This perticular varient is producing this sort of overlapped characters and is miles away from desired effect which is down there.
```plaintext
/* Mehr Nastaliq Web Font v2 */
@font-face {
font-family: "Mehr";
src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}
```
---
### Author:  [@kcahtoor](https://meta.discourse.org/u/kcahtoor)
#### Post date: [September 6, 2025, 10:05pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/9 "2025-09-06T22:05:20Z")
The issue is caused by Discourse’s default CSS font feature settings that interfere with complex script rendering:
css
```css
//Problematic default settings
font-variant-ligatures: none;
font-feature-settings: "calt" 0;
//solution is to override
font-variant-ligatures: normal;
font-feature-settings: normal;
```
This solved the issue with both fonts.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [October 6, 2025, 10:06pm UTC](https://meta.discourse.org/t/discourse-font-rendering/378897/10 "2025-10-06T22:06:06Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.