Latihan: Menggunakan Font dari Google Fonts

Belajar Dasar Pemrograman Web

Tools

Kita sudah belajar mengenai cara melakukan formatting teks pada halaman web. Tidak hanya itu, kita juga belajar cara memanipulasi teks, mulai dari tipenya, ukuran, ketebalan, style, dst. Mari kita terapkan ilmu-ilmu tersebut pada proyek studi kasus kita.

Tujuan

Pada materi font-family, kita belajar sedikit mengenai @font-face. Ia dapat digunakan untuk memperkaya gaya font untuk halaman web. Namun, kita tidak mempelajarinya secara dalam, kan?

Nah, dalam rangka mengurangi rasa penasaran terhadap penerapan @font-face, kita akan menerapkannya, tetapi tidak secara manual. Kita akan menggunakan library font yang disediakan oleh Google pada Halaman Profil. Ia bernama Google Fonts. Dengannya, kita bisa mempelajari penerapan @font-face.

Hasil akhir dari latihan ini terlihat seperti berikut.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Membuka fonts.google.com untuk memiliki font yang dicari.
Mencari font bernama “Quicksand” pada search bar dan mengambilnya.
Menghubungkan font yang dipilih pada proyek.
Menjalankan dokumen HTML pada browser.

Latihan Menggunakan Font dari Google Fonts

Berikut adalah daftar langkah latihan yang perlu diikuti dan disimak agar latihan berjalan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VSCode. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.
Untuk menggunakan font yang disediakan Google Fonts, silakan kunjungi website Google Fonts pada fonts.google.com.
Saat ini, kita akan mencari font dengan nama “Quicksand”, lakukan pencarian font tersebut pada search bar yang tersedia pada website tersebut.
Jika sudah menemukan font yang dicari, tekan tombol card (kartu) dari font tersebut. Anda akan diarahkan ke halaman baru.

Jika halaman digulir (scroll) ke bawah, Anda akan melihat beberapa tingkatan style dari font ini.
Kali ini, kita akan menggunakan Quicksand dengan tingkat ketebalan 400 (regular) dan 700 (bold). Untuk memilih font tersebut, silakan tekan tombol “+” sehingga Google Fonts akan menyimpannya sebagai Selected Families–ini seperti fitur cart pada online shop.
Setelah selesai memilih font yang dicari, perhatikan di bagian ”Use on the web” pada sidebar bernama Selected Family. Pada bagian tersebut, kita diperlihatkan dua cara untuk menghubungkan font family yang dipilih pada halaman web dan cara menyetel font ini pada CSS rules.

Kali ini, kita akan menggunakan cara <link>. Silakan lakukan copy dengan cara blok seluruh kodenya dan klik kanan lalu copy atau klik tombol tumpukan kertas pada pojok kanan bawah kotak abu-abu. Jika sudah, silakan lakukan paste dalam elemen <head> pada index.html. Berikut adalah keseluruhan elemen dalam elemen <head>.

<head>
  <meta charset="utf-8" />
  <title>Halaman Profil Bandung</title>
  
  <!-- My Own Styles -->
  <link rel="stylesheet" href="assets/styles/style.css" />
 
  <!-- Google Fonts -->
  <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=Quicksand:wght@400;700&display=swap"
    rel="stylesheet"
  />
</head>

Mantap! Sekarang, font Quicksand sudah terpasang pada dokumen HTML dan kita dapat memanfaatkannya pada CSS. Silakan buka berkas style.css dan kita ubah nilai properti font-family pada body dengan menambahkan nilai 'Quicksand' sebelum generic font sans-serif.
```
body {
  font-family: 'Quicksand', sans-serif;
}
 
h2, h3 {
  color: #00a2c6
}
 
footer {
  padding: 20px;
  color: white;
  background-color: #00a2c6
}
```
Dengan demikian, tampilan font pada halaman web akan menggunakan Quicksand.

Bedah Kode

Hebat! Tampilanmu sudah lebih cantik menggunakan custom font sekarang. Kita tidak lagi menggunakan font bawaan browser, tetapi kita menggunakan font yang tersedia secara gratis dan mudah dari Google Fonts. Keren, kan? Nah, kita akan pelajari hal yang kita dapatkan pada latihan ini.

Custom Font dengan Google Fonts

Google Fonts adalah salah satu layanan yang menyediakan tipe font dengan sangat beragam dan memudahkan kita dalam mendesain font pada website. Google Fonts banyak menyediakan tipe font gratis dan open-source yang dapat kita manfaatkan. Saat materi ini ditulis, Google Fonts menyediakan lebih dari 1500 jenis font.

Kita telah menerapkan salah satu dari banyaknya tipe font, yaitu Quicksand. Ada beberapa tingkat ketebalan juga padanya. Kita menggunakan 400 dan 700. Dapat dilihat bahwa URL yang disematkan pada atribut href memiliki URL parameter, yaitu family. Kita menggunakan Quicksand dengan ketebalan 400 serta 700 dan pengaturan tersebut tertulis secara jelas pada parameter family. Silakan perhatikan kode bercetak tebal berikut.

<head>
  <meta charset="utf-8" />
  <title>Halaman Profil Bandung</title>
  
  <!-- My Own Styles -->
  <link rel="stylesheet" href="assets/styles/style.css" />
 
  <!-- Google Fonts -->
  <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=Quicksand:wght@400;700&display=swap"
    rel="stylesheet"
  />
</head>

Teknik Custom Font dari Google Fonts

Namun, apakah pernah terpikirkan oleh Anda isi dari URL tersebut? Bagaimana jika kita lihat bersama-sama dengan membukanya pada tab browser baru?

Lihat! Ada banyak sekali kode @font-face yang tersedia dalam URL ini. Ternyata URL tersebut merupakan berkas CSS yang dimuat atau dihubungkan ke halaman web kita dan menggunakan teknik yang sama. Hal ini membuat CSS kita dapat menggunakan tipe font yang kita pilih pada fonts.google.com. Luar biasa!

Catatan:

Google Fonts hanya dapat digunakan ketika komputer dalam keadaan online. Jika kita sedang mengembangkan website dalam keadaan offline, sebaiknya gunakan pendekatan @font-face.
Sedikit fun-fact: platform belajar dicoding.com juga menggunakan custom font untuk menampilkan sebagian kontennya (teks). Konten tersebut ditampilkan menggunakan tipe font bernama Quicksand.

Bagaimana pengalamannya? Mudah, bukan? Silakan lakukan kreativitas Anda terhadap font-family. Anda dapat memilih tipe yang disukai sehingga menampilkan konten halaman yang ciamik.

Pada latihan berikutnya, kita masih bersinggungan dengan formatting text. Kita akan mengatur beberapa seperti ukuran, ketebalan, dll. Yuk, masuk ke materi berikutnya!