Cara Menggunakan Google Fonts di WordPress

Cara Menggunakan Google Fonts di WordPress – Tampilan biasa aja pada sebuah website terkadang membuat kita marasa bosan, salah satu bagian itu adalah web font. lalu bagaimana cara merubah font pada situs yang kita kelola supaya tampil lebih indah? Ada banyak model font yang bisa kita terapkan pada website, pemasangannya pun cukup mudah digunakan, kita hanya perlu memasukkan kode tersebut pada theme yang kita gunakan di HTML dan CSS. Untuk pilihan basic biasanya sidah terdapat ARIAL, Times New Roman dan yang lainnya.

Koleksi font lebih lengkapnya silahkan langsung menuju situs resmi google font untuk mendapatkan model yang diinginkan.

Hanya mengingatkan kembali bahwa Google fonts merupakan salah satu produk google yang cukup membantu para desainer dalam mengembangkan tampilan website, disini dalam hal model font. Anda akan menemukan ratusan bahkan ribuan font disini dengan mudah dan penerapannya pun cukup gampang. Gimana, Apakah anda ingin merubah tampilan font pada situs anda? Mari simak langkahnya berikut ini:

Pertama, Silahkan kunjungi produk google font, link tautan: http://www.google.com/fonts

Kedua, Setelah terbuka situsnya silahkan pilih huruf sesuai yang anda kehendaki atau ketik nama font di kolom pencarian, usai ketemu langsung saja klik link menuju detail spesifikasi font atau langsung eksekusi melalui Select This Font.

Ketiga, setelah mengklik Select This Font otomatis anda telah menambahkan family selected, lalu disana anda cari kode CSS dan HTML.

Keempat, Copy kode CSS dan HTML pada themplate website anda. Kode html bisa dipastekan di <head> atau di bawah <title>. Sedangkan untuk kode CSS ditaruh di CSS themplate website yang anda pakai. Lalu Klik OK/Update.

Cara Menggunakan Google Fonts

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Hosting</title>
<link href=’https://fonts.googleapis.com/css?family=Roboto‘ rel=’stylesheet’ type=’text/css’>
<style type=”text/css”>
#test{
font-size: 23px;
font-family: ‘Roboto’, sans-serif;
}
</style>
</head>
<body>
<div id=”test”>
Ini Contoh Text
</div>
</body>
</html>

Jika Keempat step telah dilakukan silahkan langsung refresh / cek tampilan website tersebut. Cukup mudah bukan!?

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *