Cara Menggunakan Font dari Google Font di CSS
Sekarang ada cara yang lebih mudah yakni menggunakan font yang telah disediakan oleh google font. Sering juga para web programer menggunakan google font sebagai font pada websitenya. kelebihannya font ini dapat diakses secara online dan ada juga opsi untuk mengunduh font tersebut.
Lalu bagaimana cara mengaplikasikannya? Simak penjelasan dibawah ini.
Apa Itu Google Font
Google font adalah suatu layanan yang disediakan oleh google untuk memudahkan web programer dalam mendesain website dengan font-font yang menarik dan unik yang telah disediakan oleh google itu sendiri.Ada dua cara untuk mengaplikasikan font-font yang ada di google font. Yang pertama komputer harus terhubung ke jaringan internet. cara kedua, bisa saja diakses secara offline/localhost hanya saja kita harus mengunduh font google tersebut dengan format ttf /otf
Menggunakan google font secara online
- Untuk menggunakan font yang disediakan oleh google font, pertama teman harus mengunjungi website google font terlebih dahulu di https://fonts.google.com/
- Maka akan muncul halaman seperti dibawah
- Pilih salah satu font atau jika teman sudah tau nama font yang ingin dicari. Teman tinggal klik saja di search font.
- Jika sudah klik ikon tambah di sudut kanan atas pada font yang ingin teman pakai. Teman juga bisa milih beberapa dua, tiga atau lebih banyak lagi.
- Jika smeua font yang diinginkan sudah ditambahkan maka akan muncul tampilan seperti berikut.
- Lalu pada menu @import salin kode tersebut masukkan ke file CSS teman
Untuk lebih jelasnya perhatikan contoh berikut
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Font</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Contoh Penggunaan Google Font</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Style.css
@import url('https://fonts.googleapis.com/css?family=Pacifico|Yeon+Sung&display=swap');
h2{
font-family: 'Yeon Sung', cursive;
}
p{
font-family: 'Pacifico', cursive;
}
Apabila dijalankan maka hasilnya seperti dibawah ini.
Hasilnya akan sama karena font yang admin ambil sama, hanya saja pengaksesannya saja yang berbeda. Cara yang pertama dapat diakses secara online saja dan cara kedua dapat diakses secara offline maupun online.
Bagaimana sampai disini teman paham cara penggunaan font dari google font? Admin rasa sudah. Untuk menambah wawasan teman-teman lebih banyak lagi baca tutorial CSS selanjutnya yang membahas tentang…
Menggunakan google font offline/localhost
- Jika teman ingin font tersebut diakses secara offline/ localhost maka hal yang harus dilakukan adalah mengunduh font yang dipilih tadi dengan cara klik tombol panah kebawah terletak pada sudut kanan atas. Seperti berikut
- Kemudian extrak file tersebut dan letakkan ditempat folder HTML dan CSS supaya pemanggilannya lebih musah nantinya.
- Selanjutnya untuk pemanggilannya sama seperti tutorial sebelumnya yakni menggunakan perintah @font-face kira-kira seperti berikut.
@font-face{
font-family: yeon sung;
src: url(Yeon_Sung/YeonSung-Regular.ttf);
font-family: Pacifico;
src:url(Pacifico/Pacifico-Regular);
}
h2{
font-family: 'Yeon Sung', cursive;
}
p{
font-family: 'Pacifico', cursive;
}
font-family: yeon sung;
src: url(Yeon_Sung/YeonSung-Regular.ttf);
font-family: Pacifico;
src:url(Pacifico/Pacifico-Regular);
}
h2{
font-family: 'Yeon Sung', cursive;
}
p{
font-family: 'Pacifico', cursive;
}
Hasilnya akan sama karena font yang admin ambil sama, hanya saja pengaksesannya saja yang berbeda. Cara yang pertama dapat diakses secara online saja dan cara kedua dapat diakses secara offline maupun online.
Bagaimana sampai disini teman paham cara penggunaan font dari google font? Admin rasa sudah. Untuk menambah wawasan teman-teman lebih banyak lagi baca tutorial CSS selanjutnya yang membahas tentang…
MSCG: casino, poker, slot machines - DrmCD
ReplyDeleteCasino · 광주 출장안마 GAMES · VIRTUAL GAMBLING · GAMES · 천안 출장안마 GAMES · 청주 출장마사지 GAMES · GAMES · GAMES · GAMES · GAMES · 제주도 출장마사지 GAMES · GAMES · 안양 출장샵 GAMES · GAMES · GAMES · GAMES.