Tentu, berikut adalah artikel lengkap mengenai cara mengganti font dengan CSS.
Pemilihan font adalah salah satu aspek terpenting dalam desain web. Font yang tepat dapat meningkatkan keterbacaan, memperkuat branding, dan memberikan karakter pada situs web Anda. Dengan CSS, Anda bisa dengan mudah mengganti font dari elemen HTML apa pun.
Ada dua cara utama untuk mengatur font menggunakan CSS:
- Menggunakan Font Web Aman (Web-Safe Fonts): Font yang sudah tersedia di sebagian besar sistem operasi.
- Menggunakan Font Kustom: Mengimpor font dari luar, seperti Google Fonts atau file font sendiri.
Mari kita bahas keduanya secara mendalam.
1. Menggunakan Font Web Aman (Web-Safe Fonts)
Font web aman adalah jenis font yang hampir dijamin akan ada di komputer pengguna. Menggunakannya adalah cara paling sederhana untuk memastikan konsistensi tampilan font di berbagai perangkat.
Properti font-family
Untuk mengganti font, Anda menggunakan properti font-family. Properti ini menerima satu atau beberapa nama font sebagai nilai. Browser akan mencoba memuat font pertama dalam daftar. Jika font tersebut tidak tersedia, browser akan beralih ke font berikutnya, dan seterusnya.
body {
font-family: Arial, Helvetica, sans-serif;
}
Dalam contoh di atas:
- Browser akan mencoba menggunakan font Arial.
- Jika tidak ada, browser akan beralih ke Helvetica.
- Jika Helvetica juga tidak ada, browser akan menggunakan font sans-serif default yang tersedia di sistem pengguna.
Penting untuk selalu menyertakan generic-family (seperti serif, sans-serif, monospace, cursive, atau fantasy) di akhir daftar sebagai cadangan. Ini memastikan bahwa meskipun tidak ada font spesifik yang tersedia, browser tetap akan memilih font dengan gaya yang mirip.
Berikut adalah beberapa contoh font-family yang sering digunakan:
font-family: Georgia, serif;font-family: 'Times New Roman', Times, serif;font-family: 'Courier New', Courier, monospace;font-family: 'Brush Script MT', cursive;
Jika nama font terdiri dari dua kata atau lebih, seperti 'Times New Roman', Anda harus membungkusnya dengan tanda kutip tunggal (' ') atau ganda (" ").
2. Menggunakan Font Kustom
Untuk tampilan yang lebih unik dan modern, Anda bisa menggunakan font kustom yang tidak ada di komputer pengguna secara default. Cara paling umum untuk melakukan ini adalah melalui Google Fonts.
Langkah-Langkah Menggunakan Google Fonts
- Kunjungi Google Fonts: Buka situs web https://fonts.google.com/.
- Pilih Font: Cari dan pilih font yang Anda sukai (misalnya, “Poppins”).
- Pilih Gaya Font: Klik font yang Anda pilih, lalu pilih gaya font yang Anda butuhkan (misalnya, Regular 400, Bold 700, dll.).
- Impor Font ke Proyek Anda:
Google Fonts akan memberikan kode impor CSS yang bisa Anda salin. Ada dua cara untuk mengimpor:
- Menggunakan Tag
<link>(Direkomendasikan): Salin tag<link>yang disediakan dan letakkan di dalam bagian<head>file HTML Anda.HTML<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=Poppins:wght@400;700&display=swap" rel="stylesheet"> </head> - Menggunakan
@import: Salin kode@importdan letakkan di bagian paling atas file CSS Anda.CSS@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
- Menggunakan Tag
- Terapkan Font di CSS Anda: Setelah font diimpor, Anda bisa menggunakannya dengan properti
font-family.CSSbody { font-family: 'Poppins', sans-serif; } h1 { font-family: 'Poppins', sans-serif; font-weight: 700; /* Menggunakan bobot font yang telah kita impor */ }
Sama seperti sebelumnya, penting untuk menyertakan generic-family (sans-serif dalam contoh ini) sebagai font cadangan.
Menggunakan File Font Lokal (@font-face)
Jika Anda memiliki file font sendiri (misalnya, .woff, .woff2, .ttf), Anda dapat mengimpornya ke proyek menggunakan aturan @font-face.
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/mycustomfont.woff2') format('woff2'),
url('path/to/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
font-family: Nama yang Anda berikan untuk font kustom Anda.src: Lokasi file font. Anda bisa menyertakan beberapa format (woff2,woff) untuk kompatibilitas browser yang lebih luas.font-weightdanfont-style: Menentukan bobot dan gaya font.
Properti CSS Penting Lainnya Terkait Font
Selain font-family, ada beberapa properti CSS lain yang penting untuk mengontrol tampilan font:
font-size: Mengatur ukuran teks. Contoh:font-size: 16px;ataufont-size: 1.2em;.font-weight: Mengatur ketebalan font. Contoh:font-weight: bold;ataufont-weight: 700;.font-style: Mengatur gaya font menjadiitalic,normal, atauoblique.line-height: Mengatur jarak antar baris teks. Contoh:line-height: 1.5;.
Contoh Penerapan
Berikut adalah contoh file HTML dan CSS lengkap yang menunjukkan cara menerapkan font kustom dari Google Fonts ke berbagai elemen.
index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ganti Font dengan CSS</title>
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Judul Halaman Ini</h1>
<p>Ini adalah paragraf contoh yang akan menggunakan font Roboto.</p>
<div class="card">
<h3>Ini adalah kartu informasi</h3>
<p>Teks di dalam kartu ini juga akan menggunakan font yang sama.</p>
</div>
</body>
</html>
style.css
body {
font-family: 'Roboto', sans-serif; /* Menerapkan font kustom ke seluruh halaman */
font-size: 18px;
line-height: 1.6;
color: #333;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* Mengatur ketebalan untuk judul */
color: #0056b3;
}
.card {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
Dengan memahami dan menerapkan properti font-family serta metode impor font seperti Google Fonts atau @font-face, Anda kini memiliki kontrol penuh atas tipografi situs web Anda. Ini adalah langkah fundamental untuk menciptakan desain yang profesional dan menarik.
