The lang
attribute should be added with whatever the language code is. For example lang="ur"
for Urdu. This needs to be added to any element where you have Urdu text. You can then target all lang
attributes on the page that have the ur
value and set the font family for it.
*[lang="ur"] {
font-family: 'Noto Nastaleeq;
}
The caveat with this approach is that it'll only work if the lang
attribute exists and has the value set to ur
. If you forget setting this, your custom Urdu font will not show.
First, you need to load the font in the stylesheet.
/*---------- Urdu Fonts ----------*/
@font-face {
font-family: 'Noto Nastaleeq';
font-style: normal;
font-weight: 400;
src: url('fonts/NotoNastaliqUrdu-Regular.ttf');
}
Then you need to add CSS for font family in WPML > Languages > Additional CSS.
The attribute selector format should be *:lang(ur)
instead of *[lang="ur"]
.
For example:
*:lang(ur) { font-family: Noto Nastaleeq; }
instead of *[lang="ur"] { font-family: Noto Nastaleeq; }
The language code needs to match the code in WPML > Languages
ref.
Adding this to WPML > Languages > Additional CSS works for all translation added via WPML. I tried adding the code to CSS stylesheet, but that didn't work if the lang
attribute wasn't explicitly added in the translation
- Alvi Nastaleeq is the best nastaleeq style font i have come across, but the font file size is 9.5mb
- Google's Noto font family aims to support all the world's languages. Noto Nastaliq Urdu is 168kb. But the font isn't as good as Alvi Nastaleeq