Mengatur Font Arab (RTL) di Website Tanpa Plugin

Mengatur Font Arab (RTL) di Website Tanpa Plugin

Mungkin banyak dari kita yang merasa kurang puas dengan font Arab bawaan tema serta bingung bagiamana cara menggantinya. Jika kita menggunakan tema yang menyediakan pilihan khusus untuk font Arab (RTL) tentu menggantinya akan sangat mudah, namun kebanyakan tema yang tersedia tidak menyediakan pilihan khusus untuk font Arab, jika kita mengubah pengaturan font di settings typography maka seluruhnya akan terkena imbas perubahan termasuk font untuk tulisan latin sehingga banyak dari kita akhirnya menggunakan jalan pintas dengan memasang plugin, padahal memasang banyak plugin akan sangat berpengaruh pada performa website.

Dalam kesempatan kali ini saya ingin berbagi cara mengatur font untuk tulisan Arab (RTL) saja menggunakan Google Font dengan sedikit kode CSS dan html serta tanpa plugin. Berikut langkah-langkah yang harus Anda lakukan:

Langkah pertama: Memilih font

Silakan pilih font yang tersedia di Google Font, untuk mempercepat pencarian silakan pilih Arabic pada filter bahasa yang tersedia.

Klik pada font yang Anda sukai, dalam hal ini saya contohkan dengan font Amiri, akan ada pilihan-pilihan font sesuai ketebalan yang diinginkan, pilihlah yang Anda inginkan dengan mengklik select this style.

Langkah kedua: Menyalin kode html

Pada tab link di sidebar sebelah kanan silakan copy kode html yang isinya seperti ini:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital@1&display=swap" rel="stylesheet">

Langkah ketiga: Letakkan kode html di templat header.php

Langkah keempat: Silakan letakkan kode tersebut pada templat header.php di dalam folder tema aktif yang Anda gunakan. Dalam hal ini saya sangat menyarankan agar Anda menggunakan child theme sehingga ketika terjadi error Anda dapat memperbaikinya dengan mudah dan ketika parent theme ada update maka file yang sudah dimodifikasi tidak dioverride oleh file asli tema yang mengakibatkan modifikasi yang telah Anda buat menjadi kembali seperti semula, jika di sana tidak ada templat header.php silakan Anda copy dari parent theme dan letakkan di child theme.

Untuk mengakses file header.php Anda bisa menggunakan salah satu cara berikut:

1. Mengaksesnya dari CPanel, Direct Admin atau panel lain yang Anda gunakan, setelah itu buka folder wp-content > themes > pilih tema yang Anda gunakan > edit file header.php
2. Dari theme editor yang ada di dashboard website Anda, jika tema Anda tidak menyediakan fitur theme editor maka Anda bisa menggunakan plugin Theme Editor atau plugin lain yang Anda sukai.

Setelah Anda berhasil mengakses file header.php  silakan edit dan tambahkan kode html yang telah Anda copy tadi tepat di antara tag dan sehingga menjadi kode link Anda . Tidak masalah jika di sana terdapat kode lain, silakan tambahkan tanpa menghapus kode yang sudah ada. Lalu silakan klik save.

Langkah keempat: Menambahkan kode CSS

/* Custom Font for RTL Arabic www.zaad.my.id */
*[dir="rtl"] {
font-family: 'Amiri', serif;
}

Kode CSS di atas untuk font Amiri, jika Anda menggunakan font yang lain maka silakan ganti font-familiy sesuai yang Anda gunakan.

Untuk menambahkan kode CSS tersebut Anda bisa melakukannya dengan salah satu cara berikut:

1. Mengakses file style.css yang berada di tema aktif yang sedang Anda gunakan, file ini berada pada direktori yang sama dengan folder header.php yang telah Anda edit. Edit file style.css dan tambahkan kode di atas dan letakkan di bawah kode yang sudah ada.
2. Menambahkan file CSS dari dashboard WordPress Anda, silakan klik Layout > Customize atau Tampilan > Sesuaikan, dan cari menu untuk menambahkan custom CSS, setelah itu paste kode tersebut di sana dan klik simpan.
3. Jika Anda menggunakan plugin caching silakan purge cache dan bersihkan semuanya, setelah itu coba Anda lihat hasilnya.

Penting:

1. Kode di atas akan otomatis mengubah jenis font Arab default, artinya Anda tidak memilih jenis font apa pun untuk tulisan Arab ketika Anda hendak memposting, semua font Arab yang belum Anda tentukan jenisnya akan otomatis berubah sesuai font yang Anda pilih tadi, tidak perlu melakukan perubahan font dari editor website Anda. Jika Anda telah menentukan font melalui editor maka kode CSS tadi tidak akan bekerja.
2. Anda harus mengaktifkan RTL direction (kanan ke kiri) untuk tulisan Arab yang Anda posting, sebab jika arahnya masih LTR (kiri ke kanan) maka kode CSS tadi tidak akan bekereja. Untuk memunculkan pilihan RTL Anda bisa menggunakan plugin Advanced Editor, atau Anda bisa menggunakan custom CSS jika Anda tidak menginginkan plugin tersebut, Anda bisa merujuk ke sini untuk membuat custom CSS, atau Anda cukup membuatnya seperti ini langsung <p dir="rtl">بسم الله الرحمن الرحيم</p>
3. Mungkin Anda tidak melihat perubahan font pada mode preview atau pratampil, tapi Anda bisa melihatnya dari front end langsung, jika ingin melihat perubahan font dari mode preview atau mode pratampil silakan ulangi langkah pertama, setelah Anda menentukan font dan menentukan style di sidebar bagian kanan silakan pilih tab import, copy kode CSS nya (copy isinya saja tanpa tag <style> dan </style>), lalu tambahkan code tersebut seperti yang Anda lakukan pada langkah keempat di atas.

Demikian trik mengatur font Arab tanpa plugin, semoga bermanfaat untuk kita semua.