Membuat WebFonts Sendiri

Developers.WapBlog.ID - Selamat siang semua, pada kesempatan kali ini saya akan membagikan kembali salah satu tutorial yang mungkin berguna untuk menambahkan ciri khas tersendiri untuk tampilan blog kalian. Yap, sesuai judul kita bakal ngebahas salah satu fitur pada css yang mungkin belum banyak dari kalian yang tahu. Fungsi pembahasan ini hanya sekedar berbagi karena kalian yang mungkin sering menangani project bisa jadi diminta untuk membuat WebFonts yang sudah ditentukan alih-alih menggunakan font gratis dari Google Fonts atau Adobe Fonts. Ini berdasarkan pengalaman beberapa kali saya menemui situs-situs yang menggunakan Font mereka sendiri atau menggunakan font premium yang mereka beli.

Sebelum masuk ke tutorialnya, mari kita bahas terlebih dahulu rule dari @font-face pada CSS3.

1. Support Browser:
WebFonts Support Browser

2. Sintak

@font-face{
font-descriptor: nilai;
}

Font Descriptor:
font-family: digunakan untuk mendefinisi nama font dan harus diisi
- src: digunakan untuk mendefiniskan url dari font dan ini juga harus diisi
font-stretch: digunakan untuk mentukan rentang dari font. default: normal. Nilai dari font-stretch bisa dengan persen dimulai dari 50 hingga 200. Atau dengan:
-- normal, semi-condensed, condensed, extra-condensed, ultra-condensedsemi-expanded, expanded, extra-expanded, ultra-expanded.
font-style: digunakan untuk mengatur gaya font. default: normal. Nilai dari font-style adalah normal, italic atau oblique.
font-weight: digunakan untuk mengatur ketebalan font. default: normal. Nilai dari font-weight adalah normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.
- unicode-range: digunakan untuk mengatur rentan unicode. default: U+0-10FFFF.

3. Contoh:
Dalam contoh kali ini, saya akan menggunakan font dari Acer Foco yang saya rasa mirip dengan: Font Foco di Adobe Fonts.
Berikut snippetnya:

@font-face{
font-family: "Acer Foco";
src: url(https://s.wapblog.id/c/fonts/acer-com/AcerFoco_Rg.woff) format('woff');
font-weight: normal;
font-style: normal;
}

4. Contoh lengkap:

<!DOCTYPE html>

<html>

<head>

<style>@font-face{
font-family: "Acer Foco";
src: url(https://s.wapblog.id/c/fonts/acer-com/AcerFoco_Rg.woff) format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Acer Foco", sans-serif, serif;
}</style>

</head>

<body>Hai jomblo</body>

</html>

Nah satu lagi, kalian bisa menggunakan multiple source font seperti eot, ttf, bahkan svg untuk browser-browser yang tidak mendukung format dari font yang kalian gunakan. Untuk browser Chrome, tidak semua font akan di load secara bersamaan melainkan otomatis dipilih dari font size yang paling ringan. Untuk browser lain saya kurang memperhatikan bagaimana cara load dari multiple font ini.

Nah gimana? oiya, pada contoh ini saya hanya menggunakan woff ya karena lebih ringan dibandingkan dengan format lain. Kalian juga bisa menggunakan woff2 yang lebih ringan dibandingkan dengan woff.

Catatan:
Font milik Acer Inc. yang tidak dibagikan untuk umum sehingga penggunaannya adalah tanggung jawab kalian sendiri Banyak font-font lain diluar yang bisa kalian gunakan secara bebas kok.