Urdu Nastaleeq font in WordPress WPML and other websites

README.md

Non-English WordPress sites

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.

WordPress and WPML

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

Urdu Fonts

• 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

Links

• Reduce WebFont Size

urdu.css

/*---------- Urdu Fonts ----------*/
@font-face {
  font-family: 'Alvi Nastaleeq';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Alvi_Nastaleeq_Regular.ttf');
}
	
@font-face {
  font-family: 'Noto Nastaleeq';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/NotoNastaliqUrdu-Regular.ttf');
}
	
*[lang="ur"],
*[lang="ur-PK"] { 
	font-family: 'Alvi Nastaleeq;
}
	
p[lang="ur"],
p[lang="ur-PK"] { 
	font-size: 18px;
}

wpml-language-urdu.css

*:lang(ur) { font-family: Alvi Nastaleeq; }