Cara Mudah Menambahkan Font Custom di WordPress - Anontekno

Cara Mudah Menambahkan Font Custom di WordPress

font custom wordpress

Cara Menambahkan Font di WordPress

Jika bisa membuat menjadi lebih bagus, mengapa harus memakai font yang biasa-biasa saja untuk website Kamu? Jadikan blog atau website Kamu jadi sesuatu yang berbeda serta niche website Kamu, dengan menggunakan custom font. Custom font merupakan gaya hangat serta dapat membantu Kamu menciptakan theme jadi lebih menarik.

Pastinya, kita tentu suka dengan website yang mempunyai bentuk font yang baik. Bukan cuma akan membuat bentuk website dengan cara totalitas jadi menarik, tetapi juga membuat konten Kamu jadi nyaman dibaca. Hanya saja, pilihan font yang ada di WordPress umumnya terbatas serta terkait dengan theme yang Kamu terapkan. Berita bagusnya, Kamu saat ini dapat meningkatkan custom font ke WordPress, baik dengan cara manual ataupun dengan bantuan sebagian plugin.

Lalu gimana cara mengubah custom font untuk WordPress? Berikut ini caranya.

Tempat mendownload font untuk WordPress

Ada banyak sekali website font gratis yang dapat Kamu jadikan sumber. Font Squirrel merupakan salah satu website dimana Kamu dapat menemukan banyak font gratis yang mempunyai sertifikat komersil. Google Website Font Service juga termasuk layanan serupa, diadakan oleh Google serta ada lebih dari 135 tipe font di dalamnya. Edge Web Fonts, layanan serupa yang diadakan oleh Adobe, juga mempunyai banyak sekali koleksi font. Apabila Kamu ingin, Kamu juga dapat mencoba Typekit, yang mempunyai koleksi ribuan font website, bersama dengan Fonts. com yang juga mengklaim mempunyai 150. 000 font untuk website serta desktop. Website yang lain yang juga dapat Kamu maanfaatkan merupakan dafont serta 1001freefonts.

Mengkonversi Font jadi format Web-Friendly

Setelah Kamu menemukan font yang mau Kamu terapkan di website, saat ini waktunya untuk meninjau bentuk font itu. Perlu diketahui bahwa tidak seluruh font dapat telihat dengan baik di website browser. Tetapi Kamu tidak perlu takut sebab meski font yang Kamu seleksi tidak disupport oleh website browser, Kamu masih senantiasa dapat mengubahnya jadi struktur yang dapat digunakan.

Saat sebelum mengkonversi font dari satu format ke format yang lain, ayo kita lihat sejenak perbandingan format dari font.

  • Open Type Fonts
    Kerap disingkat dengan bentuk OTF, ini merupakan bentuk yang sangat banyak dipakai sebagai font website serta tertera sebagai merek dagang Microsoft( trademark). Font tipe ini bergerak dengan baik nyaris di semua website browser.
  • True Type Fonts
    Disebut juga dengan TTF, font tipe ini terbuat oleh Microsoft serta Apple pada tahun 1980 serta dipakai oleh sistem operasi Microsoft serta Apple. Font ini dibantu oleh hampir seluruh website browser, tercantum Internet Explorer mulai versi 9.0, Google Chrome mulai versi 4.0, Safari mulai versi 3.1, Firefox mulai versi 3.5 serta Opera mulai versi 10.0.
  • Web Open Font Format
    Font WOFF banyak dipakai di website serta disarankan oleh W3C. Font tipe ini dibantu oleh nyaris seluruh website browser, tercantum Internet Explorer mulai versi 9.0, Google Chrome mulai versi 4.0, Safari mulai versi 3.1, Firefox mulai versi 3.5 serta Opera mulai versi 10.0.
  • WOFF 2.0
    Font ini ada setelah WOFF 1.0, karena keahlian kompresinya lebih bagus. Font ini tidak dibantu oleh Safari serta Internet Explorer, tetapi berjalan dengan bagus di Google Chrome mulai versi 36.0, Firefox mulai versi 35.0 serta Opera mulai versi 26.0.
  • Embedded Open Type Font
    Font tipe ini merupakan bentuk compact dari font OTF serta dipakai sebagai font yang ditempelkan di website, dibantu oleh seluruh website browser.

Apabila Kamu telah mendapatkan font yang mau Kamu maanfaatkan untuk WordPress Kamu, tetapi Kamu belum percaya apakah font itu sesuai untuk seluruh website browser, gunakanlah bantuan tool Website Font Generator. Tool ini akan membantu Kamu untuk mengkonversi hampir semua tipe font ke bentuk website dengan mudah.

  1. Buka Web Font Generator.
  2. Tekan tombol Upload( 1) untuk meng- upload font Kamu, centang tanda setuju bahwa font secara legal dapat dipakai untuk website embedding(2)(ditempel di website).
  3. Tekan tombol Download( 3) serta simpan file. zip ke komputer Kamu.
  4. Di dalam file arsip. zip, Kamu akan menemukan font dalam bentuk WOFF serta WOFF 2. 0 bersama dengan file CSS serta halaman demo HTML. Bentuk font ini dibantu nyaris oleh seluruh browser.

Setelah semua selesai, kita akan menambahkan font custom ke WordPress.

Yang Kamu butuhkan

Saat sebelum memulai, yang Kamu butuhkan yaitu:

  • Akses ke halaman admin WordPress
  • Akses ke control panel hosting ataupun aplikasi FTP

Cara 1 – Menambahkan Custom Font ke WordPress dengan Plugin

Plugin mungkin ialah solusi sangat sederhana serta mudah, apabila Kamu mau menambahkan font ke WordPress. Sebagian plugin yang terkenal antara lain:

WP Google Fonts

Kamu dapat menambahkan font ke WordPress dengan mudah dengan cara menggunakan plugin WP Google Font. Plugin ini akan secara otomatis memasukkan isyarat yang dibutuhkan ke website Kamu. Tidak hanya itu, Kamu juga leluasa menentukan font yang mau dipakai untuk element CSS tertentu dari halaman admin WordPress.

Install langsung plugin ini dari direktori plugin resmi WordPress serta buka bagian Google Fonts. Kamu akan melihat Google Font Control Panel. Disini, Kamu dapat memilih font serta mengganti berbagai setting seperti gaya font, element yang diganti, dan lain-lain.

Typekit Fonts for WordPress

Kalau Kamu mau menambahkan font Typekit ke WordPress Kamu, Kamu harus mencatat ke Typekit terlebih dulu serta membuat kit. Instruksi perinci cara membuat kits dapat Kamu temukan disini.

Setelah Kamu mempunyai kit, install plugin Typekit Fonts for WordPress. Untuk mengkonfigurasi plugin ini, akses menu Settings->Typekit fonts dan paste kode Kamu. Plugin ini akan secara otomatis memanggil font yang sudah Kamu tambahkan ke kit Kamu.

Use Any Font

Dengan Use Any Font, Kamu dapat menambahkan beberapa font ke website WordPress Kamu.

Kamu dapat meng- install plugin ini dari halaman direktori plugin WordPress. Setelah cara instalasi selesai, buka bagian Use any font, buat kunci API gratis serta klik tombol Verify

Setelah verifikasi selesai, Kamu akan dapat meng- uploa font dalam format TTF, OTF, WOFF. Kamu juga dapat memutuskan font tertentu untuk element yang berbeda.

Cara 2 – Menambahkan Custom Fonts ke WordPress dengan cara Manual

Kalau Kamu tidak mau membebani WordPress Kamu dengan plugin, Kamu dapat menambahkan font ke WordPress dengan cara manual. Prosesnya sangat gampang, Kamu hanya cukup meng- upload font ke account hosting Kamu serta setelah itu meng-edit file CSS pada theme Kamu. Instruksi lebih detailnya seperti ini:

  1. Unduh font ke komputer Kamu, untuk menambahkan font di WordPress.
  2. Umumnya font akan diarsip dalam bentuk. zip. Ekstrak file. zip itu.
  3. Saat ini, upload file font Kamu( dapat memakai File Manager ataupun aplikasi FTP) ke direktori wp- content atau themes atau your- theme atau fonts( buat folder fonts bila belum ada). Dalam ilustrasi ini, kita sudah meng- upload font AguafinaScript- Regular. ttf
  4. Sekarang, buka halaman admin WordPress serta buka menu Appearance->Editor. Kamu akan melihat file style. css. Scroll ke bawah file itu serta tambahkan baris kode berikut ini( janganlah lupa ubah nilai font- family serta url sesuai dengan font Kamu):
    @font-face {
    font-family: Aguafina Script-Regular;
    src: url(https://anontekno.com/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
    font-weight: normal;
    }
  5. Tekan tombol Upload file untuk menyimpan perubahan.

Kode font-face akan memanggil font tiap kali pengunjung mengakses website Kamu. Tetapi, font mungkin tidak tampil untuk seluruh element, alhasil, Kamu tidak melihat perubahan apapun di halaman depan. Untuk memasangkan font ke element tertentu, Kamu harus meng- edit file style. css yang sama. Sebagai ilustrasi, kode berikut akan membuat font Aguafina Script dipakai untuk judul website kita:

   .site-title { 
   font-family: "Aguafina Script-Regular", Arial, sans-serif; 
   }

Kesimpulan

Cara menambahkan font ternyata sangat mudah, kan? Kami harap mudah- mudahan tutorial diatas dapat membantu Kamu dalam menambahkan font ke website WordPress Kamu. Kami sarankan supaya Kamu menggunaan plugin saja, sebab lebih mudah serta simpel dari melakukannya dengan cara manual.