Cara Instal Font di dalam Website

Sahabat Pintar, senang sekali saya bisa berbagi kembali dalam tutorial IT. Kali ini kita akan belajar untuk menginstal font di dalam website. Maksud dari menginstal font di dalam website adalah menggunakan font-font yang tidak ada di server atau menggunakan font-font yang tidak biasa dalam halaman web kita. Tujuannya adalah agar halaman web kita bisa terlihat lebih menarik dengan adanya font-font yang baru dan beragam (atau agar halaman web yang kita buat sesuai dengan detil spek dari si klien *curhat). Jadi misalnya si klien web meminta, menubar itu font nya harus tipe X padahal font tipe X tidak ada di server atau harus download dulu di situs lain. Nah, supaya tidak bingung, langsung mulai saja ya tutorialnya ^__^.

Oh ya, sebelum mengikuti tutorial ini, saya berasumsi (tsah, jadi ingat ujian jaman kuliah dulu, kalau soal tidak lengkap pasti disuruh asisten untuk membuat asumsi sendiri -__-“) Sahabat Pintar sudah paham apa itu HTML, CSS, dan XAMPP serta localhost. Jadi, Sahabat Pintar bisa mencoba tutorial ini di localhost (di XAMPP/htdocs) bagi yang ingin mencoba di komputer lokal atau bisa langsung upload di CPanel hosting webnya bagi yang langsung ingin mencoba di webnya.

Nah, sebagai gambaran, berikut adalah contoh tulisan yang ingin kita buat di halaman web:

Berikut langkah-langkahnya:

1. Download tipe font yang Sahabat Pintar inginkan, misalnya saya tadi mendownload di http://www.dafont.com/

2. Buat sebuah folder di localhost/cpanel dengan nama misalnya tutorial_font

3. Di dalam folder tutorial_font, buat folder db_font, kemudian buat extract font yang sudah Anda download tadi. Biasanya font hasil download berupa zipfile sehingga perlu diextract menjadi .ttf atau.otf (sesuai font nya)

4. Buat skrip CSS seperti berikut (hanya contoh saja, Anda bisa mengembangkannya sendiri)

5. Di bagian url berisi url di mana Anda menyimpan font Anda. Simpan dengan nama style.css

6. Buat skrip HTML (hanya contoh saja untuk mengetes apakah font sudah bisa dipakai) seperti berikut:

<html>

<head>

<title>Penggunaan CSS Eksternal</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>

<body>

<p class=”custom_font”>Tina Yuliani Ayuningsih</p>

</body>

</html>