Cara Menggunakan Font Eksternal Dengan CSS

Cara Menggunakan Font Eksternal Dengan CSS - Font berfungsi untuk menentukan jenis/gaya dari tulisan. Dengan font, anda dapat membuat tampilan web semakin menarik.
Anda dapat mengatur jenis font dengan css, tepatnya dengan property font-family. Secara default, hanya ada beberapa font yang dapat anda gunakan, seperti Arial, Sans-Serif, dll.
Nah untuk mengatasi hal tersebut anda dapat menggunakan Font Eksternal, atau menggunakan file font sebagai font tersebut. Dalam hal ini CSS3 telah menyediakan property @font-face untuk melakukan hal tersebut.
Langsung saja berikut langkah-langkahnya.

1. Siapkan file font

Siapkan dulu file font tersebut, formatnya boleh .ttf, .otf, .woff, dll. Untuk perbedaanya dapat anda cari sendiri. Disini saya akan menggunakan font Josefin Slab, dan filenya adalah JosefinSlab-Regular.ttf.

2. Masukan property @font-face ke css anda

Buka file css anda, kemudian buat property @font-face, berikut kodenya.

@font-face {

font-family: 'Josefin Slab Regular';
src: url(JosefinSlab-Regular.ttf);

}

Penjelasan:

• Untuk font-family diisi dengan nama font yang anda gunakan
• Ganti nama file yang didalam url() dengan file font anda

3. Masukan ke selector CSS

Setelah itu, masukan font di @font-face tadi ke selector yang akan dipakaikan font external. Bisa di body, di class, dll. Cara pemanggilanya sama seperti biasa. Misalkan saya akan menggunakanya untuk class .ubahfont.

.ubahfont {

font-family: 'Josefin Slab Regular';

}

Isi font-family sesuai nama font-family di @font-face tadi.
Dan berikut hasilnya.

Untuk file fontnya dapat kalian download di Google, banyak disana.
Sekian postingan saya yang berjudul Cara Menggunakan Font Eksternal Dengan CSS.
Jangan lupa baca postingan saya sebelumnya Cara Membuat Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal.