Template Blogger Premium DISINI

6 Font Face Arabic CSS untuk Mempercantik Blog

CSS @Font Face Tambahan untuk Memperindah Tampilan Blogger dan Wordpress
Harap tunggu 0 detik...
Selamat! Link Berhasil Dimuat.
Gulir ke Bawah dan klik Buka Link untuk membuka Link Tujuan

Bagi Anda yang suka membuat postingan dengan Huruf Arab atau Blog dengan niche Islami, tentunya akan sering menulis huruf arab di blog. Berikut ini 6 Arabic Font yang bisa Anda gunakan untuk mempercantik tampilan Web / Blog Anda. Selain mempercantik, tentunya tulisan akan lebih mudah dibaca oleh pengunjung. Untuk menulisnya Anda bisa gunakan Arabic Keyboard Online.

Daftar Isi Artikel:

Sebagai bukti, saya akan menulis Hauqolah tanpa CSS, begini hasilnya

لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ

Kita akan bandingkan dengan penambahan CSS dan Font di bawah ini

LPMQ Isep Misbah

Font ini adalah karya anak bangsa, dan saya sangat kenal dengan pembuatnya yaitu kakak kelas saya dahulu Ust. H. Isep Misbah. Beliau adalah Kaligrafer Nasional dan tulisannya menjadi tulisan Standar Mushaf Indonesia, yang dia tulis dari tahun 2014 - 2019. LPMQ adalah Lajnah Pentashih Mushaf Al-Qur'an. Makanya font ini dinamakan LPMQ Isep Misbah.

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face{
      font-family:'LPMQ';
      src:url('https://kangismet.github.io/fonts/lpmq.eot');
      src:url('https://kangismet.github.io/fonts/lpmq.eot?#iefix') format('embedded-opentype'),
      url('https://kangismet.github.io/fonts/lpmq.ttf') format('truetype');
      font-weight:400;
      font-weight:normal;
      font-display: swap;
    }
    
    .arab{
      font-size: 26px;
      line-height: 48px;
      font-family: LPMQ,"Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Amiri

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face {
      font-family: 'Amiri';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/amiri/v17/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2');
      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    }
    
    .arab{
      font-size: 26px;
      line-height: 48px;
      font-family: "Amiri","Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Me Quran

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face{
      font-family:'Me Quran';
      src:url('https://kangismet.github.io/fonts/me_quran.eot');
      src:url('https://kangismet.github.io/fonts/me_quran.eot?#iefix') format('embedded-opentype'),
      url('https://kangismet.github.io/fonts/me_quran.ttf') format('truetype');
      font-weight:400;
      font-weight:normal;
      font-display: swap;
    }
    
    .arab{
      font-size: 26px;
      line-height: 48px;
      font-family: "Me Quran","Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Uthman Thaha

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face{
      font-family:'UthmanThaha';
      src:url('https://kangismet.github.io/fonts/Uthman-Thaha.eot');
      src:url('https://kangismet.github.io/fonts/Uthman-Thaha.eot?#iefix') format('embedded-opentype'),
      url('https://kangismet.github.io/fonts/Uthman-Thaha.ttf') format('truetype');
      font-weight:400;
      font-weight:normal;
      font-display: swap;
    }
    
    .arab{
      font-size: 26px;
      line-height: 48px;
      font-family: "UthmanThaha","Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

AlMarai

AlMarai ini konsep dasarnya adalah Khat Kuffi Modern, biasanya digunakan web-web Timur Tengah

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face {
      font-family: 'Almarai';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/almarai/v5/tsstApxBaigK_hnnQ1iFow.woff2) format('woff2');
      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    .arab{
      font-size: 24px;
      line-height: 48px;
      font-family: Almarai,"Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Tajawal

  1. Salin kode CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau /*]]>*/</style>.
  2. @font-face {
      font-family: 'Tajawal';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/tajawal/v4/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    }
    
    .arab{
      font-size: 24px;
      line-height: 48px;
      font-family: Tajawal,"Traditional Arabic",Tahoma,sans-serif;
      font-weight: normal;
      text-align: right;
      direction: rtl;
    }
  3. Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Sebetulnya masih banyak Arabic Font untuk menulis, tapi 6 diatas adalah pilihan terbaik menurut saya pribadi. Apalagi saya lebih bangga dengan Karya Anak Bangsa.

Semoga Bermanfaat..

Sumber:
https://www.kang-ismet.com/2021/05/6-font-arabic-untuk-mempercantik.html

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.