Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

6 Font Arabic untuk Mempercantik Tampilan Web

Arabic Font unuk menulis di Blog

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

4 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Sepertinya di blog AMP kompi ajaib tidak jalan deh bang.
  2. Sangat berguna sekali kang, khususnya buat saya yang juga mengetik tawasulan buat tahlilan....
    1. Alhamdulillah
  3. Pak, saya mw tanya ?
    Sy menggunakan font me Qur'an di web saya, tapi kenapa pas buka web di hp teks arab nya kaya ngga pake font me Qur'an ya, tapi KL buka di laptop sama persis kaya me Qur'an font ?
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.