Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENGGANTI FONT DI HTML

Panduan lengkap tentang cara mengganti font di HTML. Mengubah tampilan website menjadi lebih menarik dengan font yang berbeda.

Daftar Isi:

Memilih Font
Menambahkan Font ke HTML
Mengaplikasikan Font
Kesimpulan

Memiliki sebuah website yang estetik dan unik adalah sebuah kebutuhan bagi mereka yang sering berinteraksi dengan dunia digital. Salah satu cara untuk membuat website kamu menjadi lebih menarik adalah dengan mengganti font pada HTML. Proses ini cukup sederhana. Berikut adalah panduan lengkapnya.

Memilih Font

Sebelum memulai, penting bagi kamu untuk menentukan jenis font yang ingin digunakan. Ada banyak sumber di internet yang menyediakan berbagai jenis font gratis untuk kamu download, seperti Google Fonts, Dafont, dan lainnya. Pastikan kamu memilih font yang sesuai dengan tema website atau konten kamu.

Menambahkan Font ke HTML

Setelah kamu mendownload font, langkah selanjutnya adalah menambahkannya pada HTML. Untuk melakukan ini, kamu perlu menggunakan tag <style>. Berikut adalah contoh penggunaannya:

<style>
    @font-face {
        font-family: 'NamaFont';
        src: url('lokasi font');
    }
</style>

Keterangan:

  • NamaFont: Ganti dengan nama font yang kamu inginkan.
  • lokasi font: Ganti dengan lokasi file font yang sudah kamu download.

Mengaplikasikan Font

Setelah font ditambahkan ke HTML, langkah selanjutnya adalah mengaplikasikannya pada elemen yang diinginkan. Kamu bisa menggantinya pada seluruh halaman web atau hanya pada elemen tertentu.

Berikut adalah contoh penggunaannya untuk mengganti font pada seluruh halaman web:

<style>
    body {
        font-family: 'NamaFont';
    }
</style>

Jika kamu hanya ingin merubah font pada elemen tertentu, kamu bisa menggunakan selector yang sesuai. Misalnya, jika kamu ingin mengganti font pada semua heading h1, kamu bisa melakukannya seperti ini:

<style>
    h1 {
        font-family: 'NamaFont';
    }
</style>

Kesimpulan

Mengganti font di HTML adalah sebuah cara efektif untuk membuat website kamu menjadi lebih unik dan menarik. Meski terlihat rumit pada awalnya, namun sebenarnya proses ini cukup sederhana. Kamu hanya perlu mengikuti panduan di atas dan melakukan sedikit eksperimen untuk mendapatkan tampilan yang paling kamu inginkan. Selamat mencoba!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding