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.
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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;
}
<div class="arab"> لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ </div>
Me Quran
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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;
}
<div class="arab"> لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ </div>
Uthman Thaha
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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;
}
<div class="arab"> لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ </div>
AlMarai
AlMarai ini konsep dasarnya adalah Khat Kuffi Modern, biasanya digunakan web-web Timur Tengah
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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;
}
<div class="arab"> لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ </div>
Tajawal
- Salin kode CSS dibawah ini dan tempelkan tepat diatas kode
]]></b:skin>atau/*]]>*/</style>. - Selanjutnya salin dan letakkan kode dibawah ini kedalam format penulisan postingan kalian.
@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;
}
<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
Anda mungkin tertarik artikel ini :
Terima kasih telah membaca artikel kami yang berjudul: 6 Font Face Arabic CSS untuk Mempercantik Blog, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.