Home » CSS » Web Font di CSS: Cara Membuat dan Jenis Code

Web Font di CSS: Cara Membuat dan Jenis Code

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Aturan CSS @font-face

Font web memungkinkan kita untuk menggunakan font yang tidak diinstal di komputer kita.

Ketika kita telah menemukan / membeli font yang ingin kita gunakan, cukup masukkan file font di server web dan itu akan secara otomatis diunduh ke komputer kita saat dibutuhkan.

Font “own” kita ditentukan dalam aturan CSS @font-face.

Format Font yang Berbeda

Font TrueType (TTF)

TrueType adalah standar font yang dikembangkan pada akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah format font yang paling umum untuk sistem operasi Mac OS dan Microsoft Windows.

OpenType Fonts (OTF)

OpenType adalah format untuk font komputer yang dapat diskalakan.Font tersebut dibangun di atas TrueType dan merupakan merek dagang terdaftar dari Microsoft. Font OpenType digunakan secara umum saat ini di platform komputer utama.

The Web Open Font Format (WOFF)

WOFF adalah format font untuk digunakan di halaman web. Font ini dikembangkan pada tahun 2009. WOFF pada dasarnya adalah OpenType atau TrueType dengan kompresi dan metadata tambahan. Tujuannya adalah untuk mendukung distribusi font dari server ke klien melalui jaringan dengan batasan bandwidth.

The Web Open Font Format (WOFF 2.0)

Font TrueType / OpenType yang memberikan kompresi lebih baik daripada WOFF 1.0.

SVG Fonts/Shapes

Font SVG memungkinkan SVG digunakan sebagai mesin terbang saat menampilkan teks. Spesifikasi SVG 1.1 menentukan modul font yang memungkinkan pembuatan font dalam dokumen SVG. Kita bisa menerapkan CSS ke dokumen SVG dan aturan @font-face dapat diterapkan ke teks dalam dokumen SVG.

Embedded OpenType Fonts (EOT)

Font EOT adalah bentuk kompak dari font OpenType yang dirancang oleh Microsoft untuk digunakan sebagai font yang disematkan pada halaman web.

Dukungan Browser untuk Format Font

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung format font.

Font formatMicrosoft EdgeGoogle ChromeMozila FirefoxSafariOpera
TTF/OTF9.0*4.03.53.110.0
WOFF9.05.03.65.111.1
WOFF214.036.039.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOT6.0Not supportedNot supportedNot supportedNot supported

*IE: Format font hanya berfungsi jika disetel ke “dapat diinstal”.

Menggunakan Font yang diinginkan

Dalam aturan @font-face, pertama tentukan nama untuk font tersebut (misalnya myFirstFont) dan kemudian arahkan ke file font.

Tip: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak diharapkan di IE.

Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui properti font-family:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

Menggunakan Teks Tebal

Kita bisa menambahkan aturan @font-face lain yang berisi deskriptor untuk teks tebal:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

File “sansation_bold.woff” adalah file font lain, yang berisi karakter tebal untuk font Sansation.

Browser akan menggunakan ini setiap kali bagian teks dengan font-family “myFirstFont” harus dirender menjadi tebal.

Dengan cara ini kita bisa memiliki banyak aturan @font-face untuk font yang sama.

Deskriptor Font CSS

Tabel berikut mencantumkan semua deskriptor font yang bisa ditentukan di dalam aturan @font-face:

DescriptorNllaiDeskripsi
font-familynameRequired. Mendefinisikan nama untuk font
srcURLRequired. Mendefinisikan URL dari file font
font-stretchnormal
kental
sangat kental
ekstra kental
semi-kental
diperluas
setengah diperluas
ekstra-diperluas
sangat diperluas
Optional. Mendefinisikan bagaimana font harus direntangkan. Default-nya adalah “normal”
font-stylenormal
italic
oblique
Optional. Mendefinisikan bagaimana font harus ditata. Default-nya adalah “normal”
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Optional. Mendefinisikan ketebalan font. Default-nya adalah “normal”
unicode-rangeunicode-rangeOptional. Mendefinisikan kisaran karakter UNICODE yang didukung font. Defaultnya adalah “U + 0-10FFFF”

You may also like