Cara Mengubah Jenis Font Arabic dan Beberapa Variasi Tambahan di WordPress

Berikut ini saya akan mencoba sedikit menjelaskan bagaimana cara mengubah jenis font arabic yang ada di blog WordPress. Pada tampilan default, wordpress menggunakan font arabic Simflified Arabic atau kadang Tahoma. Berikut beberapa jenis font arabic yang bisa ditampilkan,

Jenis Font Tampilan
Simflified Arabic (Default)

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Traditional Arabic

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Arabic Typesetting

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Andalus

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Courier New

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Tahoma (default)

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Kode html yang dimasukkan adalah sebagai berikut

<p style="font-family: Traditional Arabic;">TEKS ARAB</p>

Kata Traditional Arabic bisa diganti dengan Arabic Typesetting, Andalus, Courier New, Tahoma atau yang lainnya.

Masukkan kode tersebut pada halaman html,

Perataan Font

Agar font arabic bisa rata kanan karena pada umumnya memang tulisan arab ditulis dari kanan, maka tinggal kita tambahkan kode teks align,

<p style="text-align: right; font-family: Traditional Arabic;">
TEKS ARAB</p>

atau tinggal pilih tool perataan teks kanan,

Mengubah ukuran font

Ukuran font arabic ini sangat penting, karena jika ukuran font yang kecil maka susah untuk dibaca. Default ukuran font adalah 10,5 pt, ini sangat kecil untuk ukuran font arab (terutama tipe Traditional Arabic), maka sebaiknya ukuran font dibuat lebih besar (kalau penulis pribadi lebih suka menggunakan ukuran font 22 pt).

Kodenya sebagai berikut,

<p style="text-align: right; font-family: Traditional Arabic;
font-size: 22pt;">TEKS ARAB</p>

Berikut perbandingan ukuran font menggunakan font Traditional Arabic.

Ukuran Tampilan
10,5 pt (default)

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

12 pt

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

14 pt

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

22 pt

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Mengubah Line Spacing (Spasi antar baris)

Line spacing ini sebenarnya tidak dikhususkan untuk arabic font saja, tapi memang untuk font arab ini menjadi sangat penting, agar tidak kelihatan berdesak-desakan antar baris apalagi jika teks arab sangat panjang sampai beberapa baris. Maka pengaturan spasi antar baris menjadi sangat penting.

Berikut contoh tulisan arab dengan pengaturan line spacing 100% (default),

عَنْ أَنَسٍ رَضِيَ اللهُ عَنْهُ قَالَ : سَمِعْتُ رَسُوْلَ اللهِ صَلَّى الله عليه وسلم يَقُوْلُ : قَالَ اللهُ تَعَالَى : يَا ابْنَ آدَمَ، إِنَّكَ مَا دَعَوْتَنِي وَرَجَوْتَنِي غَفَرْتُ لَكَ عَلَى مَاكَانَ مِنْكَ وَلاَ أُبَالِي، يَا ابْنَ آدَمَ لَوْ بَلَغَتْ ذُنُوْبُكَ عَنَانَ السَّماَءِ ثُمَّ اسْتَغْفَرْتَنِي غَفَرْتُ لَكَ، يَا ابْنَ آدَمَ، إِنَّكَ لَوْ أَتَيْتَنِي بِقُرَابِ اْلأَرْضِ خَطاَياَ ثُمَّ لَقِيْتَنِي لاَ تُشْرِكْ بِي شَيْئاً لأَتَيْتُكَ بِقُرَابِهَا مَغْفِرَةً

Untuk mengubahnya masukkan kode html sebagai berikut,

<p style="text-align: right; line-height: 150%;
font-family: Traditional Arabic; font-size: 22pt;">TEKS ARAB</p>

maka tampilannya berubah menjadi seperti ini,

عَنْ أَنَسٍ رَضِيَ اللهُ عَنْهُ قَالَ : سَمِعْتُ رَسُوْلَ اللهِ صَلَّى الله عليه وسلم يَقُوْلُ : قَالَ اللهُ تَعَالَى : يَا ابْنَ آدَمَ، إِنَّكَ مَا دَعَوْتَنِي وَرَجَوْتَنِي غَفَرْتُ لَكَ عَلَى مَاكَانَ مِنْكَ وَلاَ أُبَالِي، يَا ابْنَ آدَمَ لَوْ بَلَغَتْ ذُنُوْبُكَ عَنَانَ السَّماَءِ ثُمَّ اسْتَغْفَرْتَنِي غَفَرْتُ لَكَ، يَا ابْنَ آدَمَ، إِنَّكَ لَوْ أَتَيْتَنِي بِقُرَابِ اْلأَرْضِ خَطاَياَ ثُمَّ لَقِيْتَنِي لاَ تُشْرِكْ بِي شَيْئاً لأَتَيْتُكَ بِقُرَابِهَا مَغْفِرَةً

Ukuran line height-nya bisa diubah-ubah sesuai dengan kebutuhan, tergantung tema wordpress yang dipakai, karena beberapa tema yang dipakai (default) line height-nya sudah 150% (seperti tema yang saya pakai).

Demikian sedikit tutorial yang saya buat semoga bermanfaat. Buatlah tulisan yang enak dibaca oleh pengunjung agar memudahkan para pembaca untuk memahami maksud yang ingin disampaikan dalam tulisan yang kita buat. Mudahkanlah dan jangan dipersulit. Baarakallaahu fiykum.

Disusun oleh Rizky Abu Salman Al-Magetaniy.

6 thoughts on “Cara Mengubah Jenis Font Arabic dan Beberapa Variasi Tambahan di WordPress

  1. Bismillah..

    Mau tanya akhi.. bagaimana jika komputer user tidak terinstall font arabic yang ingin kita tampilkan?. Pasti akan terjadi “missing font”. Bagaimana menginstall font tsb ke komputer user?

    Syukron.

  2. Ping-balik: Cara Mengubah Jenis Font Arabic dan Beberapa Variasi Tambahan di WordPress « SalafiyunPress.WordPress.Com

Silakan tinggalkan komentar Anda di sini, بارك الله فيك

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s