Menggunakan Font External (@font-face) Pada CSS

Font external pada CSS merupakan font (jenis huruf) yang diinput di luar sistem yang digunakan untuk menata bentuk tulisan pada halaman web. Berbagai gaya dan bentuk font dapat diaplikasikan pada halaman web agar terlihat lebih menarik. Namun ketersediaan font lokal sangat terbatas dan kadang font tersebut tidak memenuhi kriteria untuk menampilkan teks sesuai dengan gaya tampilan font tertentu. Untuk dapat menggunakan berbagai variasi font, maka font tersebut harus terinstall pada piranti pengguna.

Jika font tidak terinstall pada piranti pengguna, maka tulisan dengan font tersebut tidak akan dapat ditampilkan. Solusi yang dapat digunakan adalah dengan menggunakan font external. Font external dapat di download secara online oleh berbagai penyedia font gratis ataupun berbayar.

Pada kebanyakan website, mereka juga menggunakan font external dan tidak mengandalkan font lokal pengguna yang belum tentu sesuai dengan pilihan font yang mereka gunakan. Font tersebut tinggal diletakkan pada folder tertentu, kemudian dapat diakses oleh seluruh piranti yang berbeda-beda secara online.

Jenis Dan Format Font Pada Web Browser

Font memiliki jenis dalam berbagai format yang berbeda seperti eot, ttf, otf, woff dan svg. Web browser juga memiliki jenis yang beragam. Pada web browser tertentu font dengan format eot didukung dengan sempurna. Namun pada web browser yang lainnya, format tersebut sama sekali tidak dikenal dan font tidak akan dapat tampil.

Untuk dapat menentukan font mana yang didukung atau tidak oleh web browser tertentu ada baiknya anda mengenal berbagai jenis dan format font.

Format EOT

Font dengan format eot adalah kepanjangan dari Embedded Open Type. Format ini pada mulanya diciptakan sebagai format resmi pada Internet Explorer (Microsoft). Format EOT didukung penuh hanya oleh browser IE saja, dan untuk browser yang lainnya tidak didukung.

Format TTF

Font dengan format ttf adalah kepanjangan dari True Type Font. Format ini merupakan format font yang paling banyak didukung (support) oleh berbagai browser modern, dan juga berjalan baik pada Safari, Android dan iOS.

Format OTF

Font dengan format otf adalah kepanjangan dari Open Type Font. Format ini kembaran dari ttf namun dalam format yang berbeda. Format ini didukung (support) oleh hampir semua browser modern, dan juga berjalan baik pada Safari, Android dan iOS.

Format WOFF

Font dengan format woff adalah kepanjangan dari Web Open Font Format. Berdasarkan namanya, format ini diciptakan khusus untuk keperluan web. Jadi sangat didukung oleh hampir semua browser. Ukuran file dari font ini relatif lebih kecil sehingga akan mempercepat waktu pengaksesan.

Format SVG

Font dengan format svg adalah kepanjangan dari Scalable Vector Graphic. Format ini sebenarnya tidak diperuntukkan dalam penataan font, namun lebih ke gambar vector. Format ini didukung oleh Safari versi lama pada iOS. Pada browser standart seperti Firefox, IE format ini tidak didukung sama sekali.

Menggunakan Font External Pada CSS

Pada HTML, font walaupun bukan bagian dari elemen tag namun dianggap sebagai suatu object yang berfungsi untuk menerapkan tampilan dan bentuk tulisan. Penyeleksian pada font yang akan diterapkan, dilakukan dengan menggunakan selektor @font-face. Selektor ini miliki properti font-family sebagai nama font dan src sebagai lokasi font yang akan digunakan.

1
2
3
4

@font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto.ttf');
}

Nilai font-family merupakan nama font yang akan digunakan. Anda bebas untuk menentukan nama font family-nya. Nama ini nantinya akan digunakan sebagai rujukan elemen yang akan menggunakan jenis font tersebut.

Nilai url merupakan lokasi font tersebut. Lokasi file dari font tersebut dapat berada pada folder tertentu yang terletak sejajar dengan file HTML-nya.

Untuk dapat melakukan uji coba dengan font external, siapkan font externalnya terlebih dahulu dengan cara mendownloadnya pada berbagai situs. Anda dapat menggunakan situs yang mempunyai layanan font seperti Fonts.com, Font Squirrel, Google Fonts, Typekit, Fontspring dan lainnya.

Berikut contoh melakukan import font external dengan beberapa nilai font :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html>
<head>
<title>@font-type CSS</title>
<style>
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto.ttf');
   }
   @font-face {
     font-family: 'CHLORINR';
     src: url('fonts/CHLORINR.ttf');
   }
   @font-face {
     font-family: 'Lucky';
     src: url('fonts/luckiestguy.ttf');
   }
   @font-face {
     font-family: 'Chunkfive';
     src: url('fonts/Chunkfive.otf');
   }
   div{
     font-size:24px;
     padding:5px;
     border: solid 1px orange;
     margin:5px;
   }
</style>
</head>
<body>
   <div style="font-family: Roboto, sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
   <div style="font-family: CHLORINR, fantasy;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
   <div style="font-family: Lucky, fantasy;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
   <div style="font-family: Chunkfive, serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>

Konversi Font Dengan Format Berbeda

Font dengan format ttf dan otf merupakan format yang paling banyak didukung oleh web browser modern. Namun jika hanya menggunakan satu jenis format font saja akan menimbulkan masalah baru. Bagaimana jika ada pengguna yang mengakses dari web browser berbeda yang tidak support pada format tersebut, tentu saja tulisan tidak akan tampil sesuai dengan nilai font yang sudah ditetapkan.

Agar font dengan gaya tertentu dapat diakses oleh semua browser, perlu dilakukan konversi ke dalam berbagai format. Misalnya terdapat satu buah font dengan nama CHLORINR.ttf, anda dapat mengkonversinya ke dalam bentuk CHLORINR.otf, CHLORINR.eot, CHLORINR.woff dan CHLORINR.svg.

Penulisan pada lokasi file atau src, dapat menggunakan lokasi secara ganda berdasarkan tempat, nama file dan formatnya.

Berikut contoh penulisan font dalam berbagai format :

1
2
3
4
5
6
7

@font-face {
   font-family: 'CHLORINR';
   src: url('fonts/CHLORINR.ttf') format('truetype'),
     url('fonts/CHLORINR.eot') format('embedded-opentype'),
     url('fonts/CHLORINR.woff') format('woff'),
     url('fonts/CHLORINR.svg') format('svg');
}

25 Jul 2022