6 Font Arabic untuk Mempercantik Tampilan Web

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 Arabick 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

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

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

Kita akan badingkan 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.

@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;
}

<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>

Amiri

@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;
}

Untuk HTML sama dengan di atas (begitupun font selanjutnya di bawah ini.

Me Quran

@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;
}

Uthman Thaha

@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;
}

AlMarai

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

@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;
}

Tajawal

@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;
}

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..