Walaupun judulnya Memasang font arab dan font jepang, tapi teknik ini juga bisa digunakan untuk memasang font rusia. Bahkan font jawa hanacaraka pun bisa selama font-nya ada 🙂 . Caranya super duper gampang. Yuk di ikuti step by step-nya.

Cara Memasang Font Arab dan Jepang

1. Mencari Font yang sesuai

Nah, ini sebenarnya langkah yang paling  memakan waktu. Anda HARUS mencari font dengan lisensi open atau free. Anda tidak bisa menggunakan font bajakan. Atau misalnya anda mencomot font yang ada di Windows trus dijadikan font web. He3, tidak akan bisa. Kenapa? Karena saya sudah mencobanya dan gagal. Kenapa gagal? karena font yang ada di windows harus dirubah dulu menjadi web font yang di support oleh semua browser mayor yang ada saat ini. Kalo anda membeli font, biasanya sudah disertakan versi web font-nya. Jadi ga perlu repot mengconvert ke web font.

Dimana mencari web font yang cocok?

• Font umum, anda bisa mencari di di Font Squirrel atau di tempat lain. Silahkan cari di google ya
• Font arab ada berbagai macam. Tipe Naskh, Kufi, Thuluth, Ta’liq, dll. Tapi font yang digunakan dalam Al Quran adalah font tipe Naskh. Untuk tipe Naskh, saya rekomendasikan Font Amiri. Kenapa tidak menggunakan font Utsmani yang memang digunakan untuk Al Quran saat ini? Masalahnya adalah di lisensi. Font Utsmani adalah font yang free tapi tidak boleh diubah menjadi web font. Menurut saya, huruf yang paling mendekati font Utsmani adalah font Amiri. Untuk tipe font arab selain Naskh, saya tidak tau. Mungkin kamu bisa mencari sendiri di google 🙂 . Info-kan ke sini ya, kalo ketemu 😉
• Font jepang, anda bisa menggunakan Font MPlus . Saya benar-benar kaget saat mendownload font jepang. Perlu diketahui, penulisan aksara jepang menggunakana huruf hiragana, katakana, dan kanji. Kalo untuk hiraga dan katakana, ukuran font yang ada lumayan kecil. Tapi jika anda ingin memasang huruf kanji, ukuran font naik menjadi 5 MB !! Besar sekali hanya untuk font. Pikirkan baik-baik jika anda ingin memasang huruf Kanji di blog anda. Karena bisa menyebabkan blog anda lama loadingnya. Walaupun begitu, Font MPlus mendukung untuk huruf hiragana, katakana, dan kanji.
• Font rusia, yunani, jawa belum pernah nyobain. Kalo ga salah ada kok font jawa yang free. Tapi belum pernah di coba. Mungkin kamu bisa nyobain sendiri, dan kasih report ke sini 🙂

Nah, setelah ketemu font yang cocok, download font-nya dan kamu siap untuk langkah yang selanjutnya.

2. Mengenal Format Font

Sebelum mengkonversi font menjadi web font, kamu harus mengetahui dulu format font yang ada. Yuk kita kenali dulu format web font yang digunakan masing-masing brower saat ini.

• Format EOT (Embedded OpenType). Format ini dibuat oleh Microsoft. Jadi tidak heran, kalo semua versi Internet Explorer mampu menampilkan font dengan format ini.
• Format WOFF (Web Open Font Format). Format ini dibuat oleh Mozilla. Jadi jika kamu ingin huruf arab dapat di tampilkan dengan baik oleh Firefox, gunakan format ini.
• Format SVG (Scalable Vector Graphics). Format ini biasanya untuk browser Safari dan mobile phone.
• Format TTF (True Type Font). Inilah format font awalnya yang kita download.

Oke, sekarang pertanyaannya, format mana yang harus digunakan? Secara singkat jawabannya, SEMUANYA. Hah, semua format? Yup, semua format di atas digunakan agar web kita dapat di tampilkan dengan baik di semua browser mayor yang ada.

3. Mengkonversi Font Menjadi Web Font

Inilah langkah yang membuat anda tidak bisa dan HARUS menggunakan font yang legal. Karena semua font converter yang bagus tidak akan mengijinkan kamu melakukan konversi font yang illegal. Ada banyak converter font yang ada. Tapi yang terbaik hasil konversinya adalah Web font generator di Font squirrel.

Berikut ini cara menggunakan Webfont generator di Font Squirrel untuk font arabic

• Upload font amiri yang telah di download dari http://www.amirifont.org/ ke font squirrel dengan mengklik add font
  
• Pilih mode expert agar dapat memilih pilihan yang lebih banyak.
• Font format : Pilih TrueType, WOFF, WOFF2, EOT compressed, dan SVG
• Subsetting : Pilih Custom subsetting
• Unicode ranges : isi dengan 0600-06FF, 0750-077F, FB50-FDFF, FE70-FEFF, 08A0-08FF
• Agreement : Klik Yes, the fonts I’m uploading are legally eligible for web embedding.
• Untuk pilihan yang lain, biarkan secara default.
• Klik Download your kit untuk mendownload webfont yang dikonversi. Dalam webfont kit ada file css yang bernama stylesheet.css. File itu akan berguna untuk memasang webfont di web.

Bagaimana dengan font jepang? Tidak terlalu ribet seperti huruf arab. Cukup upload font dan pilih mode optimal.

4. Memasang Webfont di Blog WordPress

Sebenarnya cara ini tidak hanya bisa digunakan WordPress saja, tapi bisa juga digunakan pada Joomla, Drupal, dll. Tapi berhubung saya pake WordPress jadi judulnya di beri Blog WordPress 🙂 .Nah, sekarang kamu telah mempunyai file webfont kit. Untuk memasang webfont itu di blog caranya sebagai berikut.

• Upload semua webfont ke folder font template biasanya ada di

  wp-content\themes\[nama template]\font

  . Jangan ada yang font yang direname. Biarkan apa adanya.

• Buka file stylesheet.css dan copy semua kode pada file itu dan paste ke file css pada template wordpress yang biasanya ada di

  wp-content\themes\[nama template]\css

  atau mungkin bisa berbeda tergantung dari masing-masing template.

• Perhatikan, file css harus menunjuk dengan tepat lokasi webfont. Jika webfont berada pada folder yang berbeda dengan file css maka gunakan tanda ../ untuk naik satu level. Kode font-face awalnya adalah sebagai berikut

  
  /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 9, 2014 */
  @font-face {
        font-family: 'amiriregular';
        src: url('amiri-regular-webfont.eot');
        src: url('amiri-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('amiri-regular-webfont.woff2') format('woff2'),
             url('amiri-regular-webfont.woff') format('woff'),
             url('amiri-regular-webfont.ttf') format('truetype'),
             url('amiri-regular-webfont.svg#amiriregular') format('svg');
        font-weight: normal;
        font-style: normal;}
  

  Karena file css berada di folder wp-content\themes\[nama template]\css sedangkan font berada di folder wp-content\themes\[nama template]\font maka saya perlu naik satu level untuk menunjuk lokasi web font. sehingga kode font-face saya menjadi sebagai berikut.

  
  /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 9, 2014 */
  @font-face {
        font-family: 'amiriregular';
        src: url('../amiri-regular-webfont.eot');
        src: url('../amiri-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../amiri-regular-webfont.woff2') format('woff2'),
             url('../amiri-regular-webfont.woff') format('woff'),
             url('../amiri-regular-webfont.ttf') format('truetype'),
             url('../amiri-regular-webfont.svg#amiriregular') format('svg');
        font-weight: normal;
        font-style: normal;}
  

Cara Lain untuk Kamu Yang Bingung

Kode di atas sangat krusial, karena kalo kamu salah menunjuk lokasi web font dengan benar, maka font tidak bisa muncul. Ada cara mudah kalo kamu agak bingung dengan cara di atas. Ini caranya

• Upload web font ke dalam FOLDER YANG SAMA dengan folder css.
• copy semua kode css font-face ke dalam file css template

Saya tidak terlalu suka cara ini karena file template menjadi tidak rapi. Tapi kalo kamu bsa menerima ketidakrapian itu, gunakan cara ini 🙂

Oh iya, cara ini juga berlaku persis sama dengan font jepang.

5. Membuat Class untuk Font Arab atau Font Jepang

Font arab sudah terpasang di web. Tapi untuk menggunakannya, kamu perlu membuat class CSS. Misalkan kamu ingin menggunakan huruf arab di dalam paragraf pada sebuah artikel. Tambahkan kode css ini kedalam file css template

p.arab {
		font-family: "amiriregular", Verdana, Helvetica, Arial, sans-serif;
		font-weight: normal;
		font-size: normal;
}

Untuk font jepang bisa menggunakan class p.jepang atau nama lain yang kamu suka.

6. Cara Menggunakan Class Font Arab atau Font Jepang

Setelah membuat class arab di css, maka kamu bisa memanggilnya kapan pun.
Misalnya dalam satu paragraph berisi tulisan berikut ini
الى مع ثانية مليون, به، أن وبعدما الساحل. أسر اوروبا لتقليعة لبلجيكا، أم, الا بهيئة تعديل هو. عدم ماذا الأرض استعملت أي, بسبب أسابيع الإنذار، أي حول. بل على لعدم مقاطعة اوروبا. أي المحيط البرية الإمتعاض وصل, ضرب تم يعبأ وبعدما الأسيوي.
Maka untuk menggunakannya tambahkan kode <p class=”arab”>…</p> sehingga menjadi

<p class=”arab”>   الى مع ثانية مليون, به، أن وبعدما الساحل. أسر اوروبا لتقليعة لبلجيكا، أم, الا بهيئة تعديل هو. عدم ماذا الأرض استعملت أي, بسبب أسابيع الإنذار، أي حول. بل على لعدم مقاطعة اوروبا. أي المحيط البرية الإمتعاض وصل, ضرب تم يعبأ وبعدما الأسيوي.
</p>

7. Cara Mencek Font Arab dan Jepang Telah Terpasang dengan Benar

Nah, bagaimana mengecek font arab atau jepang sudah terinstal dengan benar? Gampang. Pastikan bahwa di komputermu tidak terinstall font arab atau jepang yang kamu pasang di blog. Saat browser di komputermu membuka blog, browser akan berusaha menampilkan sesuai dengan kode css font-face. Tapi jika salah, maka browser akan menampilkan dengan urutan  Verdana, Helvetica, Arial untuk versi arabic atau jepang. Nah, kamu akan bisa melihat bentuk huruf yang di tampilkan, apakah sudah cocok dengan tampilan huruf Amiri atau MPlus.

Selamat mencoba 🙂 Kalo ada pertanyaan jangan sungkan bertanya di kolom komentar