Beranda / CSS / Pemrograman / Web

CSS Google Fonts (Tutorial CSS Part 42)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 42: Logo CSS

CSS Google Fonts: Panduan Lengkap & Sederhana

Kalau kamu lagi ngulik-ngulik desain web dan pengen tampilan font yang beda dari yang lain, Google Fonts bisa jadi pilihan paling gampang dan keren. Di artikel ini, kita bakal bahas mulai dari apa itu Google Fonts sampai cara pakainya, termasuk bagaimana menggabungkan beberapa font dan kasih efek kece. Yuk langsung aja!

1. Apa Itu Google Fonts?

Google Fonts adalah layanan gratis dari Google yang menyediakan ratusan jenis font yang bisa kamu pakai langsung di website-mu. Kelebihannya? Gratis, gampang dipakai, dan performa website tetap ngebut karena di-host langsung dari server Google.

2. Cara Menggunakan Google Fonts

Langkah-langkahnya gampang banget:

  1. Kunjungi situs https://fonts.google.com
  2. Pilih font yang kamu suka.
  3. Klik tombol “Get Font” untuk menambahkan font ke koleksi.
  4. Copy kode <link> yang muncul, lalu tempelkan di bagian <head> HTML-mu.
  5. Pakai font-nya di CSS dengan font-family.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Contoh Google Fonts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Halo Dunia!</h1>
</body>
</html>

Hasilnya:

Contoh CSS Google Font
Gambar 42.1: Contoh CSS Google Font

3. Menggunakan Beberapa Google Fonts Sekaligus

Kamu bisa pakai lebih dari satu font dalam satu halaman. Caranya, tinggal tambahkan font kedua (atau ketiga) ke dalam link yang sama.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multiple Google Fonts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Lobster&display=swap" rel="stylesheet">
  <style>
    h1 {
      font-family: 'Lobster', cursive;
    }

    p {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Judul Menggunakan Lobster</h1>
  <p>Isi teks menggunakan Roboto.</p>
</body>
</html>

Hasilnya:

Contoh CSS Multiple Google Fonts
Gambar 42.2: Contoh CSS Multiple Google Fonts

4. Styling Google Fonts

Setiap font biasanya punya beberapa varian seperti bold, italic, atau light. Waktu pilih font di Google Fonts, kamu bisa centang varian yang mau dipakai.

Misalnya kamu mau Roboto dengan varian bold dan italic:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Styling Google Fonts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
  <style>
    h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h2>Ini Judul Miring dan Tebal</h2>
</body>
</html>

Hasilnya:

Contoh CSS Styling Google Fonts
Gambar 42.3: Contoh CSS Styling Google Fonts

5. Mengaktifkan Efek Font (Font Effects)

Google Fonts juga punya fitur efek font lewat layanan Google Fonts + (Early Access / Effects). Tapi ini lebih cocok untuk eksperimen atau project tertentu karena tidak semua browser support.

Contoh efek seperti neon glow, outline, atau shadow-multiple bisa kamu dapat dari:
https://developers.google.com/fonts/docs/getting_started#enabling_font_effects

Contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Google Font Effects</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto&effect=shadow-multiple" rel="stylesheet">
  <style>
    h1 {
      font-family: 'Roboto', sans-serif;
      font-effect: shadow-multiple;
    }
  </style>
</head>
<body>
  <h1 class="font-effect-shadow-multiple">Teks dengan Efek Bayangan</h1>
</body>
</html>

Hasilnya:

Contoh CSS Google Font Effects
Gambar 42.4: Contoh CSS Google Font Effects

Catatan: Efek ini hanya berjalan jika browser mendukung dan font tersebut support font-effect. Pastikan kamu gunakan class font-effect-namaefek.

Penutup

Google Fonts bikin web jadi lebih hidup dan punya karakter. Yang penting, pilih font yang sesuai dengan isi dan suasana websitemu. Jangan kebanyakan juga, cukup 1–2 font biar tetap enak dilihat dan nggak berat loading-nya.

Selamat eksperimen dan jangan takut ngulik!

Posting Komentar untuk "CSS Google Fonts (Tutorial CSS Part 42)"