Tutorial Cara Menggunakan Google Font untuk Desain Web

tutorial desain web, font html keren, cara download google font, cara merubah font di css, kode font css, cara mengubah warna font di html, cara merubah font di html, kode font html lengkap,

Google Fonts


Cara Menggunakan Google Fonts - 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.

Kali ini saya akan membahas cara penggunaan Google Fonts untuk Desain Web, kalian akan tahu bagaimana caranya merubah font dengan menggunakan Google Fonts. Google Fonts sendiri adalah salah satu “produk” Google yang menurut saya sangat bermanfaat bagi para Desain Web. Di Google Fonts Kita bakal melihat banyak pilihan font yang keren yang dapat di aplikasikan. Oke yuk mari langsung saja kita mulai.

Cara Menggunakan Google Fonts untuk Desain Web
Step pertama: Silahkan kalian buka Google Fonts, klik tautan berikut ini: http://www.google.com/fonts

Step kedua: Akan terlihat banyak pilihan font, silahkan kalian pilih font yang ingin kalian 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).

Google Fonts

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

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:

[<html><head>
<title>Tutorial Desain Web</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"></link>
<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.

Demikian Tutorial Cara Menggunakan Google Fonts ini, semoga dapat bermanfaat.

COMMENTS

$type=grid$meta=0$readmore=0$snippet=0$count=3$comment=0

$type=three$author=hide$comment=hide$readmore=hide$meta=none$comment=none

Nama

Aplikasi Blog Desain Download Font Game Game Mobile Game PC Gratis Inspirasi Tutorial Video Editing
false
ltr
item
eaweo.com: Tutorial Cara Menggunakan Google Font untuk Desain Web
Tutorial Cara Menggunakan Google Font untuk Desain Web
tutorial desain web, font html keren, cara download google font, cara merubah font di css, kode font css, cara mengubah warna font di html, cara merubah font di html, kode font html lengkap,
https://4.bp.blogspot.com/-VMc8-oYZ3VE/WXPGBIuQcCI/AAAAAAAAAGo/z5vdas9L_tUtCK0U8O0eeH49TvPwSrQNACLcBGAs/s1600/googlefonts.jpg
https://4.bp.blogspot.com/-VMc8-oYZ3VE/WXPGBIuQcCI/AAAAAAAAAGo/z5vdas9L_tUtCK0U8O0eeH49TvPwSrQNACLcBGAs/s72-c/googlefonts.jpg
eaweo.com
http://www.eaweo.com/2017/07/tutorial-cara-menggunakan-google-font.html
http://www.eaweo.com/
http://www.eaweo.com/
http://www.eaweo.com/2017/07/tutorial-cara-menggunakan-google-font.html
true
8779593355318518250
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy