بلاگر میں اردو فونٹ کیسے لگائیں

اگر آپ اردو بلاگنگ کرتے ہیں اور آپ کے بلاگر میں اردو فونٹ نہیں ہے تو درحقیقت آپ کا بلاگ یا ویب سائٹ ابھی ادھورا ہے کیونکہ اردو اپنے اردو فونٹ کے بغیر بے جان ہے اردو کی اصل خوبصورتی اس کا اپنا فونٹ ہے۔ تو چلئے ہم آپ کو بتلاتے ہیں کہ آپ اپنے بلاگر میں اردو فونٹ کیسے لگائیں۔

1. اپنے بلاگر اکاؤنٹ میں لاگ ان ہوکر ڈیش بورڈ میں جائیں اور مینو پر کلک کریں۔
2. تھیم THEME پر کلک کریں
3. کسٹمائز Customize پر کلک کریں

اگر آپ کے تھیم میں کسٹمائز Customize کا آپشن نہیں ہے تو [Edit HTML] کے سامنے ایک 1. چھوٹا سا ڈراپ ڈاؤن بٹن ہوگا اس پر کلک کریں 2. Swich to Second Generation Theme پر کلک کریں۔ 3. BACKUP AND SWITCH پر کلک کریں۔ آپ کے تھیم کا ایک بیک اپ فائل ڈاؤن لوڈ ہو جائے گا اور آپ کو کسٹمائز کا آپشن بھی مل جائے گا۔

بلاگر میں اردو فونٹ انسٹال کرنے کا طریقہ

4. ایڈوانس Advanced پر کلک کریں

5. ایڈوانس کے نیچے Page Text کے سامنے ایک چھوٹا سا ڈراپ ڈاؤن بٹن ہوگا اس پر کلک کرکے اسکراؤل کریں بالکل نیچے Add CSS کا بٹن ہوگا اس پر کلک کریں اور درج ذیل CSS کوڈ کاپی کرکے یہاں پیسٹ کردیں

اسکرین شارٹ ملاحظہ فرمائیں

تھیم میں کلک کرنے بعد کسٹمائز کا پیج آئے گا اگر آپ کے تھیم میں کسٹمائز کا آپشن نہیں ہے تو اسے لانے کے لئے مذکورہ طریقہ اپنائیں اسکرین شارٹ 👇

1. Menu 2. Theme 3. Customize 4. Advanced 5. Drop Down Menu 6. Add CSS 7. [ Copy CSS Code and Pasting CSS ] 8. Save

فونٹ اپلائی سی ایس ایس کوڈ

@font-face { 
    font-family: 'Noto Nastaliq Urdu'; 
    line-height: 2.5em; 
    src: url(https://fonts.gstatic.com/s/notonastaliqurdu/v20/LhWNMUPbN-oZdNFcBy1-DJYsEoTq5pudQ9L940pGPkB3Qt_-PK-V2t_8.woff2) format('woff2'); 
  } 
  
  @font-face { 
    font-family: 'Gulzar'; 
    src: url(https://fonts.gstatic.com/s/gulzar/v12/Wnz6HAc9eB3HB2I7YzYYmg8.woff2) format('woff2'); 
  } 
  
  @font-face { 
    font-family: 'Mehr'; 
    src: url(//unpkg.com/mehr/mehr.ttf) format('truetype'); 
  } 

  @font-face { 
    font-family: 'Amiri'; 
    src: url(https://fonts.gstatic.com/s/amiri/v27/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2'); 
  } 

  @font-face { 
    font-family: 'UrduKhushKhatiBook'; 
        src: url('https://fontlibrary.org/assets/fonts/urdukhushkhati-ttf/3212540d7bf97a3f151974a29e6bc324/22abbaa1e151632d39d4c5cc0d29e95b/UrduKhushKhatiBook.ttf') format('truetype'); 
      } 

      @font-face { 
        font-family: 'Nafees'; 
            src: url('https://fontlibrary.org/assets/fonts/nafees-nastaleeq/f7aa4eb888367518b563474b4f498f40/4e99406984f565d64d32a29bd46a456e/NafeesRegular.ttf') format('truetype'); 
        font-weight: normal; 
        font-style: normal; 
          } 

          @font-face { 
            font-family: 'Noori KhushKhat'; 
                src: url('https://fontlibrary.org/assets/fonts/noori-khushkhat/f8d54f059679eb6bc795c90f531a102a/f4a083e44f582108ebd285b0789a4de2/NooriKhushKhatKhushKhat.ttf') format('truetype'); 
              } 

              @font-face { 
                font-family: 'Jameel Khushkhat-LK'; 
                    src: url('https://fontlibrary.org/assets/fonts/jameel-khushkhat-lk/219a5cf0c0e0acf496cc2d391c2ff4b1/c81c5a3e69df6a98290661ad70edabbb/JameelKhushkhatLKRegular.ttf') format('truetype'); 
              } 



  /* CSS Aplly */ 
body { 
    font-family: "Mehr", "Nafees", "UrduKhushKhatiBook", "Jameel Khushkhat-LK", "Gulzar", "Noto Nastaliq Urdu", "Amiri"; 
    line-height: 2.25em; 
} 
.post-title { 
  font-family: "Mehr", "Nafees", "UrduKhushKhatiBook", "Jameel Khushkhat-LK", "Gulzar", "Noto Nastaliq Urdu", "Amiri"; 
} 

.post-body { 
      font-family: "Mehr", "Nafees", "UrduKhushKhatiBook", "Jameel Khushkhat-LK", "Gulzar", "Noto Nastaliq Urdu", "Amiri"; 
      line-height: 2.25em; 
}

ان شاءاللہ آپ کا مسئلہ حل ہو جائے گا۔ ہم نے کافی محنت کرکے یہ کوڈ بنایا ہے اور پوسٹ کیا ہے اگر آپ کو ہمارا یہ ٹٹوریل پسند آئے تو دعاؤں میں یاد رکھیں اور پوسٹ کو زیادہ سے زیادہ شیئر کریں۔ شکریہ۔