Cara merubah jenis font dengan CSS

Anda bisa merubah jenis font pada CSS, seperti mengatur jenis font yang akan digunakan, ukuran font,

Font generic

Didalam CSS sendiri terdapat macam-macam jenis font. Ada banyak font yang tersedia untuk dipilih dari kumpulan font seperti font Google, font Adobe dan yang lainnya.

Font generic sendiri merupakan keluarga font yang paling umum atau bisa dibilang font default, yang dimana hampir didukung pada setiap browser, Masalah dengan menggunakan nama font generik adalah bahwa desain halaman web Anda akan bergantung pada font yang ditetapkan oleh pengguna dalam pengaturannya. Berikut daftar font generic:

  • Serif
  • Sans-serif
  • cursive
  • monospace
  • fantasy

Deskripsi singkat font generic

serif: Sebagian besar digunakan ketika teks ditulis untuk tujuan pencetakan seperti buku, surat kabar, majalah, dll. Karakter teks dihiasi dengan goresan di akhir. Contoh serif font-family adalah Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, dll.

sans-serif: Gayanya modern, formal, dan simpel dalam penampilan. Tidak seperti “Serif” Itu tidak memiliki stroke di ujungnya. Ini memiliki berbagai penggunaan tetapi paling sering dalam bentuk teks digital. Contoh sans-serif adalah Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, dll.

cursive: Jenis font ini sebagian besar digunakan dalam surat undangan, pesan informal, berita utama, dll. Penampilannya seperti, teks tulisan tangan menggunakan pena atau kuas. Contoh font-family cursive adalah Flanella, Belluccia, Insolente, Corsiva, Zapfino, dll.

monospace: Digunakan untuk memberikan contoh, teks yang diketik, instruksi, alamat surat, contoh kode, dll. Setiap karakter teks memiliki lebar yang sama. Contoh font-family monospace adalah Kurir, konsol, Monako, SimSun, Terminal, Menlo, Inconsolata, dll.

fantasy: Digunakan untuk membuat teks lebih dekoratif, berdampak dan ekspresif. Jenis font ini harus digunakan dalam teks yang lebih pendek, karena tidak mudah untuk membacanya dengan mudah. Contoh keluarga font fantasi adalah Impact, Cracked, Critter, Studz, Copperplate, dll.

p {
    font-size: 70px;
    margin: 10px 0;
}
#serif {
    font-family: serif;
}
#sans-serif {
    font-family: sans-serif;
}
#cursive {
    font-family: cursive;
}
#fantasy {
    font-family: fantasy;
}
#monospace {
    font-family: monospace;
}

Font family

Dengan properti font-family Anda bisa menggunakannya untuk merubah jenis font. Pada properti font-family Anda harus memegang beberapa nama font sebagai sistem “fallback”. Ini sangat berguna jika browser tidak mendukung font pertama, ia mencoba font berikutnya dan seterusnya.

Karena properti font-family diwarisi oleh semua elemen HTML, Anda dapat menerapkan font untuk seluruh dokumen HTML dengan menerapkannya pada elemen <body>.

Jika nama font yang Anda pilih memiliki lebih dari satu kata, maka Anda harus membungkusnya dengan tanda kutip, seperti: “Times New Roman”, “Courier New” dan jika Anda menambahkan nama font lebih dari satu, maka harus dipisahkan dengan koma.

body {
    font-family: Arial, Verdana, “Times New Roman”;
}

Jika Anda sudah memilih font yang Anda inginkan yang bukan termasuk keluarga font generic, maka tambahkan font generik. Ini menjaga jika font yang Anda pilih tidak tersedia maka akan menggunakan font generic, yang dimana font generic hampir didukung disemua browser.

Menggunakan font dari google

Google Font adalah salah satu layanan yang meyediakan berbagai jenis font secara gratis. Anda dapat mengunjungi web: https://fonts.google.com/. Google font menyediakan lebih dari 952 jenis font yang bisa Anda gunakan, dan ini berlisensi gratis. Untuk menggunakannya silakan Anda ikuti langkah-langkah dibawah ini.

Langkah pertama:

kunjungi https://fonts.google.com/ dan pilih salah satu font yang akan Anda gunakan.

silakan pilih font yang akan digunakan

Pada contoh disini kita memilih nama font Grenze.

Langkah kedua:

Jika sudah silakan klik icon tambah. Lalu ambil link url fontnya.

<link href="https://hendky.com/cloudme.fonts.googleapis.com/css?family=Grenze&display=swap rel="stylesheet">

Langkah ketiga:

Masukan didalam tag html <head></head>.

Lalu gunakan properti font-family dan masukan nama font yang Anda pilih tadi.

Agar tidak bingung silakan lihat contoh dibawah ini:

<!DOCTYPE html>
<html>
<head>
<link href="https://tools.hendky.com/cloudme.fonts.googleapis.com/css?family=Grenze&display=swap" rel="stylesheet">
<title>Belajar CSS</title>
<style>
body {
    font-family: Grenze, serif;
}
</style>
</head>
<body>
    
<h1>Belajar CSS</h1>
<p>Jenis font yang digunakan Grenze.</p>
    
</body>
</html> 

Contoh diatas menggunakan font external, mengambil script diluar situs kita, maka contoh diatas harus terkoneksi dengan internet.

Font style

Dengan properti font-style Anda bisa menggunakannya untuk menentukan gaya font untuk teks.

Properti ini memiliki tiga nilai:

  • normal – Teks ditampilkan standar (default)
  • italic – Teks ditampilkan dalam huruf miring
  • oblique – Teks “bersandar” (oblique sangat mirip dengan italic, tapi kurang didukung)
#normal {
    font-style: normal;
}
#italic {
    font-style: italic;
}
#oblique {
    font-style: oblique;
}

Font size

Dengan properti font-size Anda bisa menggunakannya untuk menetapkan ukuran pada teks. Namun, Anda tidak harus menggunakan penyesuaian ukuran font seperti, misalnya ingin membuat paragraf terlihat seperti pos atau heading (<h1> – <h6>).

Nilai font-size bisa menjadi ukuran absolut, atau relatif.

ukuran absolut:

  • Mengatur teks ke ukuran tertentu
  • Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
  • ukuran absolut berguna ketika ukuran fisik atau output layar diketahui

Ukuran relatif:

  • Mengatur ukuran relatif terhadap elemen sekitarnya
  • Memungkinkan pengguna untuk mengubah ukuran teks dalam browser
p {
    font-size: 20px;
}
Informasi: jika Anda tidak menentukan ukuran font, ukuran standar untuk teks normal, seperti paragraf adalah 16px (16px = 1em).

Ukuran font dengan pixel

Piksel (px): Piksel adalah unit ukuran tetap yang digunakan dalam media layar (yaitu untuk dibaca di layar komputer). Satu piksel sama dengan satu titik di layar komputer.

Banyak perancang web menggunakan unit piksel dalam design webnya untuk menghasilkan representasi piksel sempurna. Satu masalah dengan unit pixel adalah bahwa ia tidak naik ke atas untuk pembaca tunanetra atau ke bawah agar sesuai dengan perangkat seluler.

h1 {
    font-size: 50px;
}
p {
    font-size: 18px;
}

Menentukan ukuran font dalam pixel tidak terlalu mudah diakses, karena pengguna tidak dapat mengubah ukuran font dari pengaturan browser. 

Misalnya, pengguna dengan penglihatan terbatas mungkin ingin mengatur ukuran font lebih besar dari ukuran yang Anda tentukan. Karena itu, Anda harus menghindari menggunakan nilai piksel untuk ukuran font jika Anda ingin membuat desain yang inklusif.

Ukuran font dengan em

Ems (em): “em” adalah unit yang dapat diskalakan, yang memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser). Em mengacu pada ukuran font elemen induk atau ukuran yang bersifat dinamis. Ketika mendefinisikan properti font-size suatu em sama dengan ukuran font yang berlaku untuk induk elemen.

Jika Anda menetapkan font-size 20px pada elemen induk, lalu 1em = 20px dan 2em = 40px.

Jika Anda belum menetapkan ukuran font di mana pun di halaman, maka itu adalah default browser, yang mungkin 16px. Jadi, secara default 1em = 16px, dan 2em = 32px.

h1 {
    font-size: 3em;
}
p {
    font-size: 1.2em;
}

Sayangnya, masih ada masalah dengan versi IE, teks menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Kombinasi persen dan em

Solusi untuk mencapai efek yang sama di semua browser adalah dengan menetapkan standar properti font-size dalam persentase untuk elemen <body>.

Teknik yang paling populer adalah mengatur properti font-size pada elemen <body> lalu memberikan nilai untuk 62.5%(yaitu 62,5% dari standar 16px), yang setara dengan 10px, atau 0,625em.

Sekarang Anda dapat mengatur properti font-size untuk setiap elemen menggunakan unit em, dengan konversi mudah diingat, dengan membagi px nilai dengan 10. Dengan cara ini 10px = 1em12px = 1.2em14px = 1.4em16px = 1.6em, dan seterusnya. 

body {
    font-size: 62.5%;
}
h1 {
    font-size: 3.5em;
}
p {
    font-size: 1.6em;
}
Informasi: World Wide Web konsorsium (W3C) merekomendasikan menggunakan em atau nilai persentase (%) dalam rangka menciptakan tata letak yang lebih kuat dan terukur.

Font weight

Dengan properti font-weight Anda bisa menggunakannya untuk menentukan berat atau ketelan pada font.

Kemungkinan nilai properti untuk font-weight adalah: normalboldbolderlighter100200300400500600700800900 dan inherit.

  • Nilai numerik 100– 900tentukan bobot font, di mana setiap angka mewakili bobot yang lebih gelap daripada pendahulunya. 400sama dengan normal700sama dengan bold.
  • Nilai bolderdan lighter relatif terhadap bobot font yang diwarisi, sedangkan nilai lainnya adalah bobot font absolut.
#normal {
    font-weight: normal;
}
#light {
    font-weight: lighter;
}
#thick {
    font-weight: bold;
}
#thicker {
    font-weight: 900
}
Informasi: Jika font tidak tersedia dalam weight yang ditentukan, alternatif akan dipilih yang merupakan bobot terdekat yang tersedia.

Font variant

Dengan properti font-variant Anda bisa menggunakannya untuk menentukan sebuah teks ditampilkan dalam font small-caps. Dalam font small-caps, semua huruf kecil dikonversi ke huruf besar. Namun, huruf besar dikonversi dalam ukuran font lebih kecil dari huruf besar asli didalam teks.

Kemungkinan nilai properti untuk font-variant adalah normalsmall-caps dan inherit.

#normal {
    font-variant: normal;
}
#small {
    font-variant: small-caps;
}

Daftar properti fonts

PropertiKegunaanya
fontMenetapkan semua properti font dalam satu deklarasi
font-familyMenentukan jenis font untuk teks
font-styleMenentukan gaya font untuk teks
font-sizeMenentukan ukuran font untuk teks
font-weightMenentukan berat atau ketebelan sebuah font
font-variantMenentukan apakah teks harus ditampilkan dalam huruf kecil