Cara Menggunakan Google Font di Theme WordPress – Google Fonts adalah sumber font gratis yang di persembahkan oleh Google dan bisa digunakan oleh web designer maupun untuk kebutuhan penulisan dan berbagai macam desain lainnya.

Hadirnya Google Fonts ini juga memudahkan Anda dalam memenuhi kebutuhan font untuk pembuatan desain web karena font berada di server Google dan kita hanya perlu memanggilnya. Saat ini Google font sudah memiliki sekitar 1094 font families dengan berbagai kategori dan jumlah ini akan selalu bertambah setiap waktunya.

Sebagai pengguna WordPress, Anda juga bisa memanfaatkan font dari Google font ini untuk mempercantik bentuk tulisan Anda karena banyak sekali font-font yang bagus dan gratis untuk Anda gunakan. Beberapa pengguna baru WordPress mungkin masih belum tau cara menambahkan Google Web Font ke dalam Theme WordPress.

Maka pada artikel ini, saya akan menunjukkan cara untuk menggunakan Google Web Font di Theme WordPress. Disini saya akan memberikan dua cara mudah untuk menambahkan Google font di situs WordPress secara manual dan menggunakan plugin.

Baca : 60 Font yang Digunakan Oleh Brand Merek Logo Terkenal

Apa itu Google Font?

Google Font adalah kumpulan dari ribuan keluarga font yang ternama dengan berbagai macam desain tipografi yang indah. Ada sekitar ribuan font family bisa Anda temukan di Google font dan bebas untuk Anda gunakan untuk situs web maupun kebutuhan proyek apa pun tanpa ada biaya sedikitpun.

Google font menyediakan katalog font dan ikon open source yang kuat, sehingga memudahkan integrasi jenis dan ikon ekspresif dengan mulus di mana pun Anda berada. Ini juga dapat di unduh di desktop untuk digunakan di produk digital Anda untuk Android, iOS, dan web.

Semua font dan ikon di Google Font sudah diperiksa dan diatur oleh tim desainer, insinyur, dan kolaborator. Anda dapat membuat koleksi Anda sendiri yang sangat disesuaikan dengan memfilter kelompok, bobot, dan skrip, ditambah tema warna pengujian, dan meninjau salinan sampel.

Kelebihan menggunakan Google font adalah kode yang dihasilkan oleh Google Font dan server secara otomatis mengirimkan file sekecil mungkin ke setiap pengguna berdasarkan teknologi yang didukung browser, hal ini membuat web lebih cepat untuk semua pengguna terutama di area di mana bandwidth dan konektivitas menjadi masalah.

Cara Menggunakan Google Font di Theme WordPress Manual

Sebelum memasang font Google di Theme WordPress Anda, hal pertama yang perlu Anda lakukan adalah mencari font yang Anda sukai pada library Google web font disini ⇒ Google Fonts.

 

Setelah Anda mengunjungi Google Fonts, Anda akan melihat halaman website putih sederhana dengan banyak daftar font yang tersedia, Anda juga bisa dengan mudah mencari font sesuai keinginan Anda dengan memanfaatkan fitur pencarian dan penyaringan yang lengkap.

 

Untuk mencari font, Anda bisa mencarinya dengan melihat-lihat font dengan menscroll mouse Anda atau jika sudah mempunyai nama font yang ingin Anda cari silahkan untuk klik icon pencarian di sebelah kanan atas dengan mengetikkan nama font yang ingin Anda cari.

Pada fitur pencarian seperti yang terlihat seperti gambar diatas, Anda akan melihat beberapa pilihan untuk mempermudah pencarian font, karena ada beberapa jenis font yang berbeda-beda disediakan oleh Google untuk berbagai macam kebutuhan. Anda bisa menyaring font berdasarkan kategori dan karakteristik.

Kategori meliputi:

• Serif
• Sans-Serif
• Display
• Handwriting
• Monospace

Properti Font meliputi:

• Bold
• Thickness
• Slant
• Width

Pada contoh di artikel ini saya akan memilih Font dengan nama “Roboto”, jika Anda sudah menemukan font, klik pada tombol  “+ Select this style” yang berada di samping font yang Anda pilih.

 

Setelah Anda mengklik tombol plus “+ Select this style”, Font otomatis akan ditambahkan pada menu kotak-kotak di pojok kanan atas. Silahkan buka menu tersebut untuk mulai menggunakan font di situs WordPress Anda.

 

Anda bisa menggunakan font dengan menyalin kode font untuk di taruh di web Anda. Terdapat dua pilihan code embed font yaitu <link> dan @Import.

 

Anda hanya perlu copy code dibagian kolom atas tersebut dan taruh pada file header.php di theme WordPress yang Anda gunakan, paste kode font tersebut setelah tag <head>.

Kemudian di kolom kedua adalah CSS Rule yang berarti Anda harus menaruh file tersebut di kode CSS dari tema yang Anda gunakan di file Styles.css. Semuanya bisa Anda temukan dalam folder theme yang Anda gunakan atau bisa Anda temukan pada menu Appearance » Editor.

Anda harus mencari bagian-bagian dari kode font yang ada di Styles.CSS dan ganti dengan kode font tersebut agar font yang Anda gunakan sebelumnya berganti dengan font baru dari Google Font pilihan Anda sendiri.

Jika sudah silahkan untuk menyimpan perubahan yang Anda lakukan dan lihat perubahan font di situs WordPress Anda yang sudah menggunakan font dari Google font. Jika belum terjadi perubahan, silahkan untuk melakukan hapus cache pada browser yang Anda gunakan dan juga hapus cache pada WordPress jika Anda menggunakan plugin caching.

Baca : 25 Font Web Terbaik dari Google Font & @font-face.

Cara Menggunakan Google Font di WordPress dengan Plugin

Untuk cara kedua ini tentu sangat mudah dan Anda tidak perlu berhubungan dengan coding WordPress. Cara ini sangat di anjurkan untuk pemula karena jika tidak tepat dalam memasang plugin di file header.php maupun styles.css dapat mengakibatkan situs mengalami masalah atau malah mengacaukan tampilan dari situs WordPress Anda.

Plugin yang akan saya gunakan dalam contoh ini adalah Easy Google Fonts buatan titaniumthemes yang bisa Anda install secara gratis melalui dashboard WordPress Anda karena plugin terdapat pada library plugin WordPress.

Setelah melakukan install dan mengaktifkan plugin Anda bisa masuk pada area pengaturan plugin di Settings » Google Fonts untuk membuat kontrol pada Google font dengan memasukkan daftar CSS Selector.

Namun jika Anda tidak memahami bagian ini bisa langsung masuk pada menu Appearance » Customize dan pilih “Typography“.

Pada bagian ini Anda bisa menyesuaikan berbagai macam bagian dengan font dari daftar font milik Google seperti Heading 1-5, memilih kategori font, karakteristik fonts dan masih banyak lagi hal yang bisa Anda lakukan dengan plugin ini.

Jika semua pengaturan font sudah Anda sesuaikan dengan Google fonts di bagian Customize Anda bisa menyimpan pengaturan tersebut dan klik tombol “Publish“.

Dan sekarang Anda bisa melihat perubahan yang sudah Anda lakukan, pada customize ini Anda bisa melihat setiap perubahan yang Anda lakukan secara live.

Baca : Cara Menggunakan Font Awesome Pada Website WordPress.

Diatas adalah cara menggunakan Google font di theme WordPress, dan perlu di ingat bahwa font Google juga bisa digunakan untuk kebutuhan lain dan memasangnya di komputer Anda, ini karena font milik Google ini juga bisa download dan di instal secara gratis untuk berbagai kebutuhan tanpa perlu membayar lisensi. Semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis