In this post you’ll learn how to make web pages in Urdu, how to type in Urdu, how to use custom Urdu fonts on your website and how to configure and style a website in Urdu.
First things first, find an Urdu font that you like. I decided to use Nafees Nastaleeq.
Other good fonts are:
If you are having difficulty finding good Urdu fonts (type faces), try Persian. Persian is written very similar to Urdu (both are written in Nastaleeq script) and will do nicely for our use.
After Persian, Arabic comes at a close second in similarity. While it’s easier to find arabic fonts, using it for Urdu has caveats: some alphabets (like chay and gaaf) will be missing.
Make sure you have the right to use the font.
dir tagUrdu is a Right To Left (rtl) language. You start writing from the right side and move to the left. When using an RTL language on your website, you can specify it in the HTML code using the dir tag.
1<p dir="rtl">Write this text right-to-left!</p>
The dir attribute tells the browser the direction in which the displayed text is intended to be read. The browser will render text from left to right by default, but as with the lang attribute, you’ll need to override the intended reading direction if you’re including text that runs in the opposite direction (for example, Arabic or Hebrew).
NOTE: The dir tag is deprecated, it is not supported in HTML5. Use CSS instead.
lang taglang is a global attribute which means it can be applied to all HTML elements. Normally you’d see it specified on <html>, but you can also specify it on <p> tags.
lang takes an ISO 639-1 defined language abbreviation as value. For example, ur is for Urdu, ar is for Arabic, fr is for French and so on..
1<p lang="ur">آؤ اردو میں تحریر کریں</p>
@font-face, font-family and directionSince our website is going to be bilingual, i.e. it will have both English and Urdu posts, we will add a CSS class .urdu to the content whenever the content is going to be in Urdu. Our custom font and any specific styling will also be mentioned in the .urdu CSS class and applied when needed.
The direction can also be mentioned in the CSS.
1@font-face {
2 font-family: 'Nafees Nastaleeq';
3 src: url('../fonts/nafees_nastaleeq__v1.02-webfont.eot');
4 src: url('../fonts/nafees_nastaleeq__v1.02-webfont.eot?#iefix') format('embedded-opentype'),
5 url('../fonts/nafees_nastaleeq__v1.02-webfont.woff') format('woff'),
6 url('../fonts/nafees_nastaleeq__v1.02-webfont.ttf') format('truetype'),
7 url('../fonts/nafees_nastaleeq__v1.02-webfont.svg#nafeesregular') format('svg');
8 font-weight: normal;
9 font-style: normal;
10
11}
12.urdu {
13 font-family: "Nafees Nastaleeq";
14 direction: rtl;
15}
Once we have found a font, we will use the Webfont Generator to convert our fonts in formats for use on website and get the @font-face kit.
we are going to generate our magical fonts for use on the web with support for all browsers.
Font faces are defined in the css stylesheet. So we’ll take the code from the @font-face kit and add it to our stylesheet.