Berikut adalah panduan tentang cara mengubah font pada HTML yang bisa kalian coba langsung di kode HTML. Mengubah font pada HTML melibatkan penggunaan elemen HTML seperti tag <style> atau CSS, baik secara inline maupun dalam file terpisah.
Dengan mengatur font, tampilan teks akan menjadi lebih menarik dan sesuai dengan desain yang kalian inginkan. Berikut langkah-langkah yang bisa kalian ikuti:
Cara Mengubah Font pada HTML
1. Menggunakan CSS Inline
Cara termudah untuk mengubah font pada HTML adalah dengan CSS inline, yang langsung diterapkan di dalam tag HTML. Metode ini sangat cocok untuk pengaturan font pada elemen spesifik.
<p style="font-family: Arial, sans-serif;">Teks ini menggunakan font Arial</p>
Pada contoh di atas, font pada elemen <p> akan berubah menjadi Arial. Jika font yang ditentukan tidak tersedia, browser akan menggunakan sans-serif.
2. Menggunakan Tag <style> di Dalam HTML
Kalian juga bisa menambahkan tag <style> di bagian <head> untuk menentukan font pada beberapa elemen. Cara ini lebih efisien jika ingin menerapkan font ke banyak elemen.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Mengubah Font</title>
<style>
body {
font-family: "Times New Roman", serif;
}
h1 {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Judul dengan Font Arial</h1>
<p>Paragraf ini menggunakan font Times New Roman.</p>
</body>
</html>
Pada contoh ini, seluruh teks dalam <body> akan menggunakan font Times New Roman, kecuali judul <h1> yang menggunakan font Arial.
3. Menggunakan File CSS Eksternal
Metode ini lebih terstruktur dan disarankan jika kalian bekerja pada proyek besar dengan banyak halaman. Dengan CSS eksternal, kalian dapat mengatur font untuk semua halaman dalam satu file CSS.
- Buat file CSS baru, misalnya
style.css.
- Tambahkan aturan font berikut:
body {
font-family: Georgia, serif;
}
h1 {
font-family: Arial, sans-serif;
}
- Sambungkan file CSS ke dalam file HTML dengan kode berikut di dalam tag
<head>:
<link rel="stylesheet" href="style.css">
4. Menggunakan Google Fonts
Jika kalian ingin menggunakan font yang tidak tersedia secara default, kalian dapat menggunakan Google Fonts. Berikut adalah langkah-langkahnya:
- Buka Google Fonts dan pilih font yang ingin kalian gunakan.
- Klik Select this style dan salin link yang disediakan.
- Tempelkan link di dalam tag
<head> pada file HTML.
Contoh penggunaan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font dari Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Judul dengan Font Roboto</h1>
<p>Paragraf ini menggunakan font Roboto.</p>
</body>
</html>
Dengan cara ini, kalian bisa mempercantik tampilan teks di website menggunakan font yang lebih bervariasi.
5. Menggunakan Font-Face untuk Font Kustom
Jika kalian memiliki font khusus yang tidak tersedia secara online, kalian bisa menggunakan @font-face untuk memasukkan font tersebut.
- Siapkan file font dengan format
.ttf atau .woff.
- Masukkan kode berikut dalam CSS:
@font-face {
font-family: 'NamaFont';
src: url('NamaFont.ttf') format('truetype');
}
body {
font-family: 'NamaFont', sans-serif;
}
Dengan kode di atas, browser akan menampilkan teks menggunakan font kustom yang kalian tentukan.
Tabel Ringkasan Metode Mengubah Font di HTML
| Metode |
Keterangan |
| CSS Inline |
Mengubah font langsung pada tag HTML. |
Tag <style> di dalam HTML |
Mengatur font dalam HTML menggunakan tag <style>. |
| File CSS Eksternal |
Menggunakan file CSS untuk pengaturan yang terstruktur. |
| Google Fonts |
Menggunakan font dari Google Fonts. |
| Font-Face |
Menggunakan font kustom yang disimpan secara lokal. |
Berikut adalah contoh lengkap kode HTML dengan font yang estetik dan keren. Berikut adalah versi yang menggunakan kombinasi font yang lebih unik dan estetik: Dancing Script untuk judul, memberikan kesan tulisan tangan yang artistik, dan Poppins untuk paragraf yang memberikan kesan modern dan elegan. Kombinasi ini akan memberi tampilan yang lebih menarik dan kontemporer.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman dengan Font Estetik dan Keren</title>
<!-- Menghubungkan Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<!-- Gaya CSS -->
<style>
/* Gaya dasar untuk font dan warna */
body {
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
color: #444;
margin: 0;
padding: 20px;
line-height: 1.7;
}
h1 {
font-family: 'Dancing Script', cursive;
font-size: 3em;
color: #4A4A4A;
text-align: center;
margin-top: 0;
}
h2 {
font-family: 'Poppins', sans-serif;
font-size: 1.8em;
color: #4A4A4A;
margin-bottom: 0.5em;
text-align: center;
}
p {
font-size: 1.1em;
max-width: 700px;
margin: 1em auto;
line-height: 1.8;
color: #555;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- Konten Utama -->
<div class="container">
<h1>Selamat Datang di Analiswinter.com</h1>
<h2>Kenikmatan dalam Desain</h2>
<p>
Halaman ini didesain menggunakan kombinasi font yang modern dan unik, yaitu <strong>Dancing Script</strong> untuk judul yang memberikan kesan artistik dan <strong>Poppins</strong> untuk teks utama yang memberikan kesan bersih dan elegan. Kombinasi font ini cocok untuk kalian yang ingin menambahkan sentuhan personal sekaligus profesional pada website.
</p>
<h2>Font sebagai Elemen Visual Penting</h2>
<p>
Memilih font yang sesuai adalah bagian dari seni desain. Font tulisan tangan seperti <em>Dancing Script</em> memberikan kesan santai dan kreatif, sedangkan <em>Poppins</em> sebagai font sans-serif modern membuat teks menjadi lebih mudah dibaca dan profesional. Perpaduan ini menghasilkan pengalaman visual yang menyenangkan bagi pengunjung.
</p>
</div>
</body>
</html>
Itulah berbagai cara mengubah font pada HTML. Pilih metode yang sesuai dengan kebutuhan kalian untuk hasil yang maksimal. Selamat mencoba!