Google Font
Jika tidak ingin menggunakan jenis huruf standar dalam HTML, dapat digunakan fasilitas Google Fonts.
Google Font gratis untuk digunakan, dan memiliki lebih dari 1000 jenis huruf untuk dipilih.
Cara Menggunakan Google Font
Cukup tambahkan tautan untuk style khusus di bagian <head> kemudian arahkan ke jenis huruf di CSS.
Contoh
Pada bagian contoh ini menggunakan jenis huruf bernama “Sofia” dari Google Fonts:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Font Sofia</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body></html>Contoh
Pada bagian contoh ini menggunakan font bernama “Trirong” dari Google Fonts:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
<body>
<h1>Font Trirong</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body></html>Contoh
Pada bagian contoh ini menggunakan font bernama “Audiowide” dari Google Fonts:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>
<h1>Font Audiowide</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body></html>Gunakan Beberapa Google Fonts
Untuk menggunakan beberapa jenis huruf Google, cukup pisahkan nama jenis huruf dengan karakter pipa (|), seperti ini:
Contoh
Menggunakan beberapa huruf sekaligus:
<!DOCTYPE html>
<html>
<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>
<body>
<h1 class="a">Font Audiowide</h1>
<h1 class="b">Font Sofia</h1>
<h1 class="c">Font Trirong</h1>
</body></html>Menata Style Google Fonts
Style Google Font juga dapat diatur sesuai dengan kebutuhan dengan menggunakan properti CSS.
Contoh
Style jenis huruf “Sofia”:
<!DOCTYPE html>
<html>
<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>
<body>
<h1>Font Sofia</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body></html>Mengaktifkan Efek Jenis Huruf
Dengan menggunakan font Google terdapat juga berbagai efek jenis huruf yang dapat digunakan.
Caranya dengan menambahkan properti effect=effectname ke Google API, lalu tambahkan nama class khusus ke elemen yang akan menggunakan efek tersebut. Nama class selalu dimulai dengan font-effect- dan diakhiri dengan effectname.
Contoh
Tambahkan efek fire ke jenis huruf “Sofia”:
<!DOCTYPE html>
<html>
<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 effect fire</h1>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>
</body></html>Contoh
Tambahkan beberapa efek ke jenis huruf “Sofia”:
<!DOCTYPE html>
<html>
<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">Efek Neon</h1>
<h1 class="font-effect-outline">Efek Outline</h1>
<h1 class="font-effect-emboss">Efek Embos</h1>
<h1 class="font-effect-shadow-multiple">Beberapa Efek Bayangan</h1>
</body></html>Tutorial sebelumnya : Mengatur Font Dengan CSS
Tutorial setelahnya : Cara Memasangkan Berbagai Jenis Font Dengan CSS
Semua Tutorial CSS : Tutorial CSS