CSS Google Font
Kalau kamu tidak mau menggunakan font standar yang ada di HTML, kamu bisa menggunakan Google Fonts.
Google Fonts gratis dan bebas untuk digunakan untuk apa saja. Selain itu, koleksi Google Fonts juga banyak, ada lebih dari 1.000 font yang bisa kamu pilih.
Cara Menggunakan Google Fonts
- Copy link style sheet dari Google Fonts dan paste link tersebut di bagian
<head>pada file HTML.
- Cantumkan nama font tersebut pada CSS.
Contoh
Misalnya, kita ingin menggunakan font "Silkscreen" dari Google Fonts:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
<style>
body {
font-family: "Silkscreen", cursive;
}
</style>
</head>
Hasil: 
Menggunakan Beberapa Google Fonts
Jika kamu ingin menggunakan beberapa Google Fonts, cukup paste semua link dari Google Fonts di <head>. Atau, gunakan link style sheet dan sebutkan semua nama font dengan dipisahkan oleh tanda ( | ).
Contoh:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Silkscreen|Pacifico|Indie Flower">
Hasil: 
Catatan: Menggunakan beberapa font sekaligus bisa memperlambat web kamu. Perhatikan hal ini.
Referensi: w3schools
Tidak ada komentar:
Posting Komentar