How to write Blog Post in Urdu | Install Urdu Fonts in Blogger

 

Urdu fonts are not available easily online because the language is just for Asian countries and other foreign countries don't pay much attention to it. So most Pakistanis and Indians want their articles to be displayed in Urdu but here comes the problem. When you write your blog post in Urdu it is displayed in the default font and even if you copy-paste a Jameel Noori Nastaleeq font from somewhere it will change to default on publishing the post. 

When you try to post in the Urdu language it will look something like this, and how frustrating this is, I personally know it because I spent about 3 months finding a method for changing Urdu fonts. Here is the default font for Urdu.

---

دفعہ ۱۔ تمام انسان آزاد اور حقوق و عزت کے اعتبار سے برابر پیدا ہویٔے ہیں۔ انہیں ضمیر اور عقل ودیعت ہویٔی ہے۔ اس لیٔے انہیں ایک دوسرے کے ساتھ بھایٔی چارے کا سلوک کرنا چاہییٔے۔

دفعہ ۲۔ ہر شخص ان تمام آزادیوں اور حقوق کا مستحق ہے جو اس اعلان میں بیان کیٔے گیٔے ہیں، اور اس حق پر نسل، رنگ، جنس، زبان، مذہب اور سیاسی تفریق کا یا کسی قسم کے عقیدے، قوم، معاشرے، دولت یا خاندانی حیثیت وغیرہ کا کویٔی اثر نہ پڑے گا۔ اس کے علاوہ جس علاقے یا ملک سے جو شخص تعلق رکھتا ہے اس کی سیاسی کیفیت دایٔرہ اختیار یا بین الاقوامی حیثیت کی بنا پر اس سے کویٔی امتیازی سلوک نہیں کیا جایٔے گا۔ چاہے وہ ملک یا علاقہ آزاد ہو یا تولیتی ہو یا غیر مختار ہو یا سیاسی اقتدار کے لحاظ سے کسی دوسری بندش کا پابند ہو۔

---

As you can see I applied Urdu fonts in my blog post but it did not work. So now we will make it look in Urdu Fonts on all devices by following the method below. The changed font will look like this:

Step 1: Paste the Style for Urdu Fonts

First of all, we have to set up Styling for our fonts and also have to import the font CSS file. To do this, we will use some lines of code. Just Copy the code below and paste the above </body> tag in your blogger theme.

Go to Theme

Then Click the Drop Down

Click Edit HTML

Click CTRL+F and Type </body>

Paste the Code Below just above the </body> Tag

<style>
  @import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
  
  .poetryHeading{
  font-family: Noto Nastaliq Urdu; 
    font-size: 27px;
    color: black !important;
    text-align: right; 
    font-weight: bold;
    direction :rtl;
    line-height: 2;
  }  

  .poetryContent{
  font-family: Noto Nastaliq Urdu; 
    font-size: 17px; 
    text-align: right; 
    line-height: 2.5;
    direction :rtl;
  }
</style>

After Pasting the code it Will Look like this

Click Save

Now Publish a New Post with Urdu Text

It will be displayed in default Urdu fonts, but Carefully Follow this step

Click Pen Icon and Select HTML

Click the Icon to Format the Code

Paste the Following Code Just Before > of opening Tag. 

class="poetryHeading"    (For Bold Heading)

class="poetryContent"    (For Conent/Description)

After Doing this Your post will look like this

---

Now every time you need the heading, just paste the class="poetryHeading" before closing the tag of that text. And similarly for description or post content, paste class="postContent".  If you still need help, you can watch the video below.

---