How to Start a Blog? Panduan Lengkap Membuat Blog Hanya 30 Menit

Cara Tambahkan Google Font di Theme WordPress

Google Fonts adalah sumber font gratis yang di persembahkan oleh Google dan bisa digunakan oleh web designer dalam memenuhi kebutuhan font untuk websitenya. Saat ini Google font sudah memiliki sekitar 848 font families dengan berbagai kategori.

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 font Web Google ke dalam Theme WordPress. Maka pada artikel ini, saya akan menunjukkan cara untuk menambahkan 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.

1. Cara Tambahkan Google Font di Theme WordPress

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

Google Fonts Website

Setelah Anda mengunjungi Google Fonts, Anda akan melihat halaman website putih sederhana dengan banyak daftar font yang tersedia, Anda juga bisa dengan mudah mengganti-ganti warna situs untuk melihat bagaimana font ditampilkan dengan memilih warna background di menu dengan icon cat tumpah.

Google Font Background

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.

Pencarian font google

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

Karakteristik meliputi:

  • Bold
  • Thickness
  • Slant
  • Width

Anda juga dapat mempersempit jenis skrip sesuai dengan bahasa, hal ini membantu untuk tujuan terjemahan dan untuk stylings alternatif.

Pada contoh di artikel ini saya akan memilih Font dengan nama “Signika”, jika Anda sudah menemukan font, klik pada tombol icon plus “(+)”.

Google font signika

Setelah Anda mengklik tombol plus “(+)”, Anda akan melihat popup ditampilkan dengan dua menu tab “Embed” dan “Customize”. Silahkan buka tab “Customize” untuk memilih ukuran font apa saja yang ingin Anda gunakan. Pada font “Signika” ini terdapat 4 ketebalan font (light, regular, semi bold dan bold).

Google font costumize

Setelah Anda memilih ketebalan font pada tab Customize, silahkan untuk kembali pada tab “Embed” dan menyalin code font. Terdapat dua pilihan code embed font yaitu Standart dan Import.

Google font code embed

Jika Anda menggunakan pilihan code embed “Standart”, Silahkan copy code tersebut dan taruh pada file header.php di theme WordPress yang Anda gunakan, paste code font tersebut setelah tag <head>.

Jika menggunakan code embed “@import” silahkan copy code tersebut dan taruh pada file Styles.CSS, dan taruh pada bagian atas.

Kedua file tersebut (header.php dan styles.css) semuanya bisa Anda temukan dalam folder theme yang Anda gunakan atau bisa Anda temukan pada menu Appearance » Editor.

Menggunakan Google Font di WordPress Themes

Setelah Anda selesai menambahkan code embed font di theme WordPress Anda, sekarang Anda harus menambahkan code CSS untuk menggunakan font terebut agar bisa digunakan pada situs WordPress Anda. Code CSS font bisa Anda lihat dibagian bawah code Embed pada “Specify in CSS”.

Google Font CSS Code

Silahkan copy code CSS font tersebut dan buka file styles.css Anda di theme WordPress yang sedang Anda gunakan. Dan cari baris kode font mana yang ingin Anda ganti dengan font baru dari Google font tersebut.

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.

2. Cara Tambahkan 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 yang bisa Anda install secara gratis melalui dashboard WordPress Anda karena plugin terdapat pada library plugin WordPress.

Plugin Easy Google Fonts

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

Font Control Easy google fonts

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.

Easy google fonts customize

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. Semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

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

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Add a Comment

Your email address will not be published. Required fields are marked *

Must Read...!
Theme WordPress First Mag Responsive Free

First Mag adalah Theme WordPress Responsive Gratis yang sangat cocok untuk website blog, surat...

Cara Cepat Meningkatkan SEO WordPress di Peringkat Google

Sangat mudah untuk meningkatkan peringkat website Anda di mesin pencari Google dalam waktu yang...

Close