Indonesia

Tutorial CSS

Tutoriak CSS3

CSS Tingkat Lanjut

Referensi CSS

CSS Responsif

CSS - Web Fonts: Panduan untuk Pemula

Halo sana, para desainer web masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan yang menarik ke dunia CSS Web Fonts. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa memahami font seperti mempelajari bahasa baru - mungkin terlihat menakutkan pada awal, tapi setelah Anda menguasainya, Anda akan terkejut melihat bagaimana itu mengubah halaman web Anda!

CSS - Web safe fonts

Apa Itu Web Fonts?

Sebelum kita masuk ke detailnya, mari mulai dari dasar. Web fonts adalah font khusus yang Anda bisa gunakan di website Anda, tanpa peduli apakah mereka terinstal di komputer pengguna. Itu seperti memberikan website Anda suara unik sendiri!

Mengapa Web Fonts Penting?

Imajinasikan jika setiap buku di dunia menggunakan font yang sama. Blanda, kan? Web fonts memungkinkan Anda untuk mengungkapkan kepribadian website Anda dan meningkatkan keterbacaan. Itu adalah saus rahasia yang bisa membuat situs Anda tampak berbeda dari massa!

CSS Web Fonts - Format Tipe Font

Sekarang, mari bicarakan tentang jenis-jenis format font. Itu seperti memilih antara rasa es krim yang berbeda - masing-masing memiliki karakteristiknya sendiri!

Format Deskripsi Dukungan Browser
TTF/OTF TrueType Font / OpenType Font Semua browser modern
WOFF Web Open Font Format Semua browser modern
WOFF2 Web Open Font Format 2 Sebagian besar browser modern
EOT Embedded OpenType Internet Explorer
SVG Scalable Vector Graphics Versi iOS yang lama

Jangan khawatir jika ini terlihat seperti sup huruf saat ini. Kita akan membongkar ini secara berangsur!

CSS Web Fonts - Titik Penting

Sebelum kita mulai memasukkan kode, mari menutup beberapa titik penting:

  1. Web fonts memungkinkan Anda untuk menggunakan font khusus di website Anda.
  2. Mereka dimuat dari server, bukan komputer pengguna.
  3. Anda bisa menggunakan layanan seperti Google Fonts atau menghost font sendiri.
  4. Ada berbagai format font untuk kompatibilitas browser.
  5. Aturan @font-face digunakan untuk mendefinisikan font khusus dalam CSS.

CSS Web Fonts - Aturan @font-face

Sekarang, mari masuk ke dalam kode! Aturan @font-face seperti memperkenalkan font baru ke halaman web Anda. Berikut adalah penampilannya:

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

mari pecahkan ini:

  • font-family: Ini adalah nama yang Anda berikan ke font Anda. Anda akan menggunakan nama ini nanti untuk menerapkan font ke elemen.
  • src: Ini menentukan di mana mencari file font dan formatnya.
  • font-weight dan font-style: Ini menentukan karakteristik font.

Setelah mendefinisikan font Anda, Anda bisa menggunakannya seperti ini:

body {
font-family: 'MyAwesomeFont', sans-serif;
}

Ini memberitahu browser, "Hey, gunakan MyAwesomeFont, tapi jika Anda tidak bisa menemukannya, gunakan font sans-serif apa saja."

CSS Web Fonts - @font-face / font-stretch

Properti font-stretch seperti kelas yoga untuk font Anda. Itu memungkinkan Anda untuk memanjangkan atau mempersingkat font. Berikut cara Anda bisa menggunakannya:

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

Ini akan membuat teks Anda terlihat seperti telah ke gym dan menambah berat badan sedikit!

CSS Web Fonts - Layanan Font Online

Menggunakan layanan font online seperti memesan makanan takeout daripada memasak - itu mudah dan ada banyak pilihan. Google Fonts adalah pilihan yang populer. Berikut cara Anda bisa menggunakannya:

  1. Buka Google Fonts dan pilih font yang Anda suka.
  2. Salin tag link yang disediakan dan tempelkannya di <head> HTML Anda:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  1. Gunakan font dalam CSS Anda:
body {
font-family: 'Roboto', sans-serif;
}

Dan voila! Anda sekarang menggunakan font khusus dari Google Fonts.

CSS Web Fonts - Impor Font

Cara lain untuk menyertakan web fonts adalah dengan menggunakan aturan @import. Itu seperti mengundang font ke pesta CSS Anda. Berikut cara kerjanya:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

Metode ini memungkinkan Anda untuk menjaga semua pernyataan font Anda di file CSS Anda, yang beberapa pengembang lebih suka untuk organisasi.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia yang menakjubkan CSS Web Fonts. Ingat, seperti mempelajari keterampilan baru, latihan membuat sempurna. Jangan khawatir untuk mencoba font yang berbeda dan lihat bagaimana mereka mengubah penampilan dan rasa halaman web Anda.

Saat kitaakhiri, ini adalah cerita kecil dari pengalaman mengajar saya: Saya pernah memiliki murid yang kesulitan dalam desain web. Dia tidak bisa memahami mengapa situsnya terlihat begitu... biasa. Kemudian kita mencakup web fonts, dan itu seperti lampu penerangan menyala. Tiba-tiba, situsnya berubah dari membosankan menjadi indah. Itu kekuatan web fonts!

Jadi, maju saja, mainkan dengan font, dan lihat halaman web Anda hidup. Selamat coding, dan ingat - di dunia desain web, batasnya hanya imajinasi Anda!

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Referensi Browser Web
Tutorial Selanjutnya:
CSS - Unit