Selamat Datang

Cara Menggunakan Google Fonts

Cara Menggunakan Google Fonts — Halo semua. Membuat sebuah desain website bakal hambar rasanya apabila font yang digunakan tidak kita perhatikan desainnya, lalu bagaimana caranya agar font yang digunakan di desain web kita terlihat cantik? Ada beberapa font memang yang menurut saya sudah tersedia secara default di HTML, seperti Arial, Times New Roman, dan yang lain, namun tentunya setiap individu memiliki selera masing-masing.

google fonts

Di artikel yang bakal saya bahas kali ini mungkin membuat kamu tahu bagaimana caranya merubah font dengan menggunakan Google Fonts.

Google Fonts sendiri adalah salah satu “produk” Google yang menurut saya sangat bermanfaat bagi para web designer. Di Google Fonts Kita bakal melihat banyak pilihan font yang keren yang bisa kita aplikasikan pada proyek kita. Oke yuk mari langsung saja kita mulai.

 

Cara Menggunakan Google Fonts

Step pertama: Silahkan kamu buka Google Fonts, klik tautan berikut ini: http://www.google.com/fonts

Step kedua: Akan terlihat banyak pilihan font, silahkan kamu pilih font yang ingin kamu inginkan, caranya? Baik, misalkan saya ingin memilih font yang bernama Open Sans, maka klik tombol Quick-Use yang bergambar anak panah mengarah ke samping kanan(silahkan lihat gambar).

 

Cara Menggunakan Google Fonts

 

Step ketiga: Selanjutnya kamu akan dibawa ke halaman Quick Use. Silahkan kamu scroll kebawah sampai kamu melihat adanya kode CSS dan kode HTML(lihat gambar dibawah ini).

Cara Menggunakan Google Fonts

Step keempat: Nah, lihat kode HTML yang ada pada gambar tersebut. Copy kode tersebut dan paste di bawah kode <head> atau bisa juga di bawah kode <title>.

Step kelima: Selanjutnya copy kode CSS tersebut di kode CSS milik kamu, kemudian silahkan lihat hasilnya. Bagi yang belum paham, silahkan lihat struktur kodenya berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial Web Deisng</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<style type="text/css">
		#halo{
			font-size: 25px;
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
	<div id="halo">
		Ini Tulisan
	</div>
</body>
</html>

Catatan: Kode yang di highlight(yang ada tandanya) merupakan kode HTML dan CSS dari Google Fonts tadi.

Sekian…

Baiklah para pembaca sekali, demikian tutorial Cara Menggunakan Google Fonts ini, semoga dapat bermanfaat. Sampai jumpa.





Penulis :

Saya hanya seorang kuli artikel yang tiba-tiba pengin belajar koding. View all posts by abimanyu17

Comments

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development