Skip to main content

B.4.1.2. Font Family

Pada chapter ini kita akan membahas bagaimana caranya mengubah atau melakukan kustomisasi jenis font pada website kita dengan menggunakan properti font-family pada CSS.

Nah, cara penggunaannya cukup mudah, temen-temen. Di sini, penulis akan menggunakan sumber daya font dari Google Fonts. Ada beberapa cara untuk menghubungkan font yang akan digunakan, yaitu dengan menggunakan Content Delivery Network (CDN) atau dengan mengunduh font-nya.

Seperti biasa, temen-temen bisa buat satu file index.html dan style.css lalu temen-temen bisa hubungkan keduanya dan pastikan keduanya sudah terkoneksi dengan baik ya. Oke next.

B.4.1.2.1 Menggunakan Content Delivery Network (CDN)​

Pertama-tama, temen-temen buka situs Google Fonts dan pilih font yang kalian suka.

Output

Misalnya, kalau temen-temen suka dengan font "Roboto," tinggal pilih font tersebut. Nantinya akan di arahkan ke halaman untuk memilih style yang di inginkan seperti yang terlihat pada gambar di bawah ini:

Output

Pada contoh di atas penulis akan memilih font Roboto saja ya, nah temen-temen bisa langsung mengklik tombol Get Font yang berada di sebelah kanan atas dan antinya akan muncul halaman Selection Font. Disini temen-temen bisa klik tombol Get Embed Code ya.

Di tahap ini, tepatnya di section sebelah kiri temen-temen bisa memilih varian apa saja yang ingin di ambil dan tidak di ambil atau bahkan mengambil semua varian font yang dipilih juga bisa.

Dan di section sebelah kanan, bisa temen-temen perhatikan ada beberapa tab yang bisa temen-temen pilih. Tetapi karena kita akan menerapkannya di website maka dari itu temen-temen biarkan saja dia berada di tab web. Untuk terkoneksi dengan CDN ada dua metode, yaitu menggunakan tag <link> yang disematkan di dalam dokumen HTML dan menggunakan directive pada CSS yaitu @import. mari kita bahas satu-persatu ya.

A. @import sintaks​

Output

Pada gambar di atas, temen-temen bisa copy semuanya selain tag <style> nya ya. Setelahnya temen-temen bisa buka file style.css yang sebelumnya telah dibuat dan tuliskan kembali kode berikut:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

Setelahnya kita coba gunakan font yang telah di import.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.4.1.2. Font Family</title>

    <!-- Connected into CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1 class="hello-text">Hello, my name is Muhamad Firly Ramadan</h1>
  </body>
</html>

Pada kode CSS di atas, kita mengubah jenis font yang digunakan dengan menggunakan properti font-family pada CSS, lalu kita membuat warnanya menjadi coklat dan men-transformasi teks nya menjadi format capitalize artinya kata seperti aku suka buah akan di tampilkan menjadi Aku Suka Buah.

Temen-temen bisa buka di web browser masing-masing untuk melihat hasilnya ya.

Output

Bisa terlihat perbedannya di atas antara jenis font yang belum diubah dan sudah diubah menggunakan propeti font-family pada CSS.

Sekarang kita akan coba menggunakan alternatif kedua yaitu dengan menggunakan tag <link>. Caranya kurang lebih hampir sama dengan menggunakan sintaks @import.

Output

Pada gambar di atas, temen-temen bisa langsung copy saja kode nya dengan menekan tombol Copy code di pojok kanan bawah. Setelahnya, temen-temen bisa paste saja di dalam tag <head> seperti ini:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>B.4.1.2. Font Family</title>

  <!-- CDN Roboto Font -->
  <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:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet"
  />

  <!-- Connected into CSS -->
  <link rel="stylesheet" href="style.css" />
</head>

Temen-temen bisa hapus saja sintaks @import di file style.css dan coba lihat kembali di web browser maka hasilnya akan sama.

Output

Menggunakan Content Delivery Network (CDN) untuk font memang punya beberapa kelebihan dan kekurangan yang perlu temen-temen tahu.

Kelebihannya, yang pertama, tentu saja kemudahan dan kecepatan dalam penggunaannya. Temen-temen nggak perlu repot-repot mengunduh atau menyimpan file font di server sendiri. Cukup tambahkan link dari Google Fonts, dan otomatis font-nya akan terhubung ke website kalian. Selain itu, karena CDN menggunakan server yang tersebar di berbagai lokasi, waktu muat halaman jadi lebih cepat, karena font diambil dari server yang paling dekat dengan pengguna.

Tapi, di balik itu ada juga kekurangannya. Karena font di-hosting di server pihak ketiga, ada risiko ketergantungan. Misalnya, kalau server CDN sedang down atau koneksi pengguna lagi lambat, font mungkin nggak termuat dengan sempurna. Akibatnya, bisa muncul font fallback yang nggak sesuai dengan desain yang temen-temen rencanakan. Selain itu, ada juga pertimbangan privasi, karena setiap kali font diakses lewat CDN, data pengguna seperti alamat IP bisa saja terekam oleh penyedia layanan tersebut.

Jadi, penting buat temen-temen mempertimbangkan hal-hal ini sebelum memutuskan untuk menggunakan CDN di proyek kalian.

B.4.1.2.2 Menggunakan Font Yang Sudah Di Download​

Output

Pertama, temen-temen unduh dulu font nya, disini penulis memakai font yang berbeda yaitu Montserrat. Sambil menunggu font di unduh, temen-temen siapkan satu folder untuk menyimpan font yang sudah di download. Disini penulis membuat folder dengan nama fonts.

Setelah font selesai di unduh, temen-temen bisa mengekstrak ke folder yang tadi sudah disiapkan ya.
Ketika sudah di-ekstrak maka akan tampil seperti:

Output

Setelah di-ekstrak, temen-temen bisa langsung hubungkan dengan menggunakan sintaks @font-face pada CSS. Silahkan temen-temen tulis ulang kode di bawah ya.

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}

Pada kode di atas, terdapat dua properti yaitu font-family dan src. Properti font-family disini berbeda dengan sebelumnya, konteks font-family disini mengacu ke definisi nama font yang temen-temen buat sendiri agar mudah di-ingat. Namun, perlu temen-temen perhatikan ya, membuat nama yang aneh akan sulit untuk di mengerti oleh rekan satu tim atau pengembang lain, jadi disini kita sesuaikan dengan nama asli dari font nya saja ya.

Attribut src akan diisi nilai dimana tempat font nya berada, karena disini penulis mengekstrak font nya di folder fonts, maka nilainya akan seperti ./fonts/Montserrat/Montserrat-VariableFont_wght.ttf. Temen-temen bisa sesuaikan dengan folder dan font yang telah di unduh tadi ya.

O iya, disini kita koneksikan dengan file Montserrat-VariableFont_wght.ttf karena file ini merupakan sebuah variabel yang mengandung semua style font yang terdapat di folder static.

Cara menggunakannya masih sama, coba temen-temen perhatikan kode di bawah ini: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.4.1.2. Font Family</title>

    <!-- <link> method -->
    <!-- CDN Roboto Font -->
    <!-- <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:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet"> -->

    <!-- Connected into CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1 class="hello-text">Hello, my name is Muhamad Firly Ramadan</h1>
  </body>
</html>

Coba temen-temen buka di web browser maka hasilnya akan terlihat seperti:

Output

Menggunakan font yang sudah diunduh dan disimpan secara lokal pada proyek web memiliki beberapa keuntungan dan kekurangan.

Keuntungannya adalah temen-temen mendapatkan kontrol penuh atas font yang digunakan. Dengan menyimpan font di server lokal, temen-temen tidak tergantung pada layanan eksternal dan bisa mengelola serta memperbarui font sesuai kebutuhan. Selain itu, privasi pengguna terjaga karena tidak ada data yang dikirim ke server pihak ketiga. Konsistensi tampilan juga lebih terjamin, karena font dimuat dari server yang sama dengan file lainnya, mengurangi risiko perbedaan tampilan. Tidak ada batasan akses atau penggunaan seperti yang mungkin ditemui pada layanan font eksternal.

Namun, kekurangannya adalah penggunaan font lokal dapat meningkatkan ukuran file proyek, yang mungkin mempengaruhi waktu muat halaman, terutama jika banyak font atau gaya yang digunakan. Temen-temen juga harus menangani pemeliharaan dan pembaruan font secara manual, termasuk mengganti file lama dengan versi terbaru jika ada perubahan. Meskipun mengurangi ketergantungan pada CDN, ukuran font yang besar atau banyak bisa mempengaruhi kecepatan akses halaman jika server tidak optimal. Selain itu, beberapa format font mungkin tidak didukung oleh semua browser, jadi temen-temen perlu memastikan kompatibilitas font dengan berbagai browser dan perangkat.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.1-text-styling/B.4.1.2-font-family