CSS Google Font
Google Font
Jika Anda tidak ingin menggunakan font standar apa pun dalam HTML, Anda dapat menggunakan Google Font.
Google Font gratis untuk digunakan, dan memiliki lebih dari 1000 font untuk dipilih.
Cara Menggunakan Google Font
Cukup tambahkan tautan lembar gaya khusus di bagian <head> lalu rujuk ke font di CSS.
Contoh
Di sini, kami ingin menggunakan font bernama "Sofia" dari Google Font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Hasil:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Contoh
Di sini, kami ingin menggunakan font bernama "Trirong" dari Google Font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Hasil:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Contoh
Di sini, kami ingin menggunakan font bernama "Audiowide" dari Google Font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Hasil:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Catatan: Saat menentukan font di CSS, selalu cantumkan minimal satu font fallback (untuk menghindari perilaku yang tidak diharapkan). Jadi, juga di sini Anda harus menambahkan keluarga font generik (seperti serif atau sans-serif) di akhir daftar.
Untuk daftar semua Font Google yang tersedia, kunjungi Cara - Tutorial Font Google kami .
Gunakan Beberapa Google Font
Untuk menggunakan beberapa font Google, cukup pisahkan nama font dengan karakter pipa ( |), seperti ini:
Contoh
Minta beberapa font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Hasil:
Audiowide Font
Sofia Font
Trirong Font
Catatan: Meminta beberapa font dapat memperlambat halaman web Anda! Jadi berhati-hatilah tentang itu.
Menata Font Google
Tentu saja Anda dapat menata Google Font sesuka Anda, dengan CSS!
Contoh
Gaya font "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Hasil:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Mengaktifkan Efek Font
Google juga telah mengaktifkan berbagai efek font yang dapat Anda gunakan.
Pertama tambahkan ke Google API, lalu tambahkan nama kelas khusus ke elemen yang akan menggunakan efek khusus. Nama kelas selalu dimulai dengan
dan diakhiri dengan .effect=effectnamefont-effect-effectname
Contoh
Tambahkan efek api ke font "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Hasil:
Sofia on Fire
Untuk meminta beberapa efek font, cukup pisahkan nama efek dengan karakter pipa ( |), seperti ini:
Contoh
Tambahkan beberapa efek ke font "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Hasil:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect