Cara mengganti font di html

Secara default, setiap text yang kita buat dalam HTML akan menggunakan salah satu atribut font dari websafe font yaitu serif-fonts. Kita dapat merubah gaya / style font yang kita inginkan, style pada font ini disebutnya font-family alias keluarga font. Pada postingan sebelumnya, saya pernah jelaskan apa saja font-family default HTML. Silahkan lihat pada artikel tersebut lalu ikuti tutorial dibawah ini.

Table of Contents Show

Video Tutorial Belajar CSS – Merubah Jenis Font di CSS
Mengenal Property font-family
Mengenal Font Generic
Gimana cara ganti font?
Font apa saja yang ada di HTML?
Bagaimana saya menukar font style online?

Jika kalian lebih senang melihat video (tutorial) dibanding membaca (tutorial), silahkan scroll kebawah dan klik pada link video untuk melihat video tutorialnya.

Disini, saya akan menggunakan default HTML font yaitu WebSafe Font seperti yang saya jelaskan pada artikel tersebut. Setelah kalian tentukan font mana yang ingin digunakan, sekarang silahkan tentukan tulisan mana yang indin diubah style font nya. Misalnya disini saya akan merubah tulisan yang ada pada tag p, maka silahkan berikan gaya / CSS untuk tag p tersebut seperti ini:

ads by posciety

<style type="text/css">
  p {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  }
</style>

<p>Tutorial membuat text fonts - HTML CSS ~ Rio Bermano</p>

Setiap ingin mengganti jenis font, silahkan gunakan property “font-family” dengan isinya yaitu nama jenis font yang ingin digunakan. Tidak lupa juga pada isi font-family ini berikan beberapa pilihan font yang dimasukkan (tidak cuma satu), fungsinya adalah untuk mengcover jika browser yang digunakan pengunjung tidak support jenis font yang pertama “Palatino Linotype” maka akan coba menggantinya dengan jenis font yang kedua “Book Antiqua” dan begitu juga seterusnya.

Secara default, browser akan membaca & menampilkan jenis font yang pertama dituliskan didalam font-family.

Dalam tutorial kali ini kita akan membahas mengenai Jenis Font pada Web, Jenis Font yang digunakan pada text di halaman web, sangat mempengaruhi tampilan dari halaman web itu sendiri, faktor kerapihan yang menjadi nilai tambah ketika kita menggunaan Jenis Font yang pas untuk halaman web yang anda buat.

Jenis Font yang digunakan pada text di halaman web, bisa kita rubah dengan menggunakan property font-family yang telah disediakan oleh CSS.

Video Tutorial Belajar CSS – Merubah Jenis Font di CSS

Dalam pemilihan Font anda juga harus memperhatikan ketersediaannya font yang digunakan di komputer pengguna/pengunjung web anda, sebab ketika anda menggunakan property font-family, browser akan melakukan pengecekan apakah jenis font yang digunakan sudah terinstall di komputer pengunjung webnya ?? semisal nilai value dari property font-family adalah tahoma, berarti browser akan mencari apakah di komputer client web, telah terinstall font Tahoma.

Jika ternyata font tidak terinstall bagaimana ?? Web akan ditampilkan dengan menggunakan font default yang telah di set pada browser.

Jadi Sebenarnya ketika anda menginstall Sistem Operasi Windows atau sistem operasi lain, beberapa jenis Font akan terinstall di komputer anda secara otomatis, lalu ketika anda menginstall aplikasi text editor seperti microsoft Word, Libre Office juga akan menginstall beberapa font tambahan secara otomatis, ketika anda menginstall aplikasi design grafis seperti photoshop beberapa font juga akan secara otomatis di install, Sehingga beberapa font yang standart kemungkinan besar telah terinstall di komputer anda, untuk melihat daftar font yang otomatis terinstall di sistem operasi windows bisa lihat disini https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows

Mengenal Property font-family

Seperti yang telah disinggung di bagian sebelumnya, property font-family digunakan untuk mengganti jenis font yang digunakan dalam halaman web, untuk contoh skripnya silahkan perhatikan kode dibawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Font-Family</title>

body{

font-family:Tahoma;

}

.pertama{

font-family:Verdana;

}

</style>

</head>

<body>

<h2>Sedang Belajar Font-Family</h2>

<p class="pertama">Paragraf Pertama</p>

</body>

</html>

Beberapa Aturan untuk penulisan nama font di property font-family antara lain :

Nama font yang ditulis harus diawali huruf besar, semisal untuk tahoma harus ditulis Tahoma, tetapi aturan ini tidak berlaku untuk font generic, font generic akan dibahas lebih lanjut bagian bawah.
Jika nama font terdapat spasi maka harus ditulis dengan tanda petik contohnya “Times New Roman”

semisal skrip diatas kita simpan dengan nama font-family.html, lalu kita buka di browser :

maka text yang tampil adalah seperti gambar diatas, penjelasannya sebagai berikut :

Text pertama ditampilkan dengan menggunakan font jenis Tahoma, karena mendapatkan effect CSS dari selector body, property font-family bersifat inheritance yang artinya sifatnya bisa diturunkan ke turunanannya (child) sehingga text pertama menggunakan jenis font Tahoma, konsep inheritance bisa dibaca di sifat penurunan di CSS
Text kedua ditampilkan dengan menggunakan jenis font Verdana

Bagaimana Mudah bukan, anda cukup menuliskan nama font yang ingin digunakan.

Menuliskan Lebih dari 1 nama Font

Pada penjelasan diatas telah dibahas ketika anda menuliskan nama font tertentu, browser akan mencari apakah font tersebut telah terinstall di pc client pengguna website, nah masalahnya adalah ketika font yang diinginkan tidak terinstall di komputer.

Nah untuk mengatasi hal tersebut anda bisa menuliskan beberapa nama font secara bersamaan di 1 property font-family, contohnya adalah skrip dibawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Font-Family</title>

.pertama{

font-family:Arial,"Times New Roman",Verdana;

}

</style>

</head>

<body>

<h2>Sedang Belajar Font-Family</h2>

<p class="pertama">Paragraf Pertama</p>

</body>

</html>

pada kode css dengan value property font-family Arial,”Times New Roman”,Verdana, penulisan beberapa jenis font ini dapat mengatasi jika nama font yang ditulis tidak terinstall di komputer, sebagai pemisahnya bisa menggunakan tanda koma, maka urutan penggunaan font adalah sebagai berikut :

Browser akan mencari jenis font Arial yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font Arial
Jika Arial tidak ditemukan maka browser akan mencari jenis font “Times New Roman” yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font “Times New Roman”
Jika “Times New Roman” tidak ditemukan maka browser akan mencari jenis font Verdana yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font Verdana

Mengenal Font Generic

Font Generic adalah jenis font yang berfungsi sebagai alternatif terakhir ketika font yang digunakan tidak tersedia di komputer client (pengguna web), CSS menyediakan 5 Jenis Font Generic, antara lain :

Generic Font: serif

Jenis font ini adalah jenis font yang memiliki kaki atau garis tambahan pada ujung setiap huruf, jenis font ini lebih cocok digunakan pada media percetakan seperti buku,dan majalah, dengan menggunakan jenis font serif, text akan lebih mudah untuk dibaca. beberapa font yang termasuk dalam kategori serif antara lain Times New Roman, dan Georgia

Generic Font: sans-serif

Sans disini berarti tanpa, jadi bisa diartikan jenis font ini tidak memiliki kaki atau garis tambahan pada ujung setiap hurufnya, jenis font ini sering digunakan untuk halaman web, karena dianggap lebih mudah dibaca, beberapa jenis fontnya antara lain : Arial, Verdana

Generic Font: monospace

Font berjenis monospace adalah font yang memiliki lebar yang sama disetiap karakter, jika di font lain lebar untuk huruf ‘m’ dan ‘i’ akan berbeda, tetapi di jenis font ini akan dianggap sama, jenis font ini cocok digunakan untuk tulisan yang membutuhkan ketelitian seperti halnya programming, hal ini membuat banyak text editor yang menggunakan jenis font ini. jenis font yang termasuk dalam monospace antara lain Courier New, Courier, FreeMono.

Generic Font:cursive

Font berjenis cursive adalah font yang memiliki bentuk seperti tulisan tangan, atau juga bisa seperti kaligrafi, jenis font ini cocok jika digunakan untuk judul atau sub judul, untuk jenis font cursive antara lain : “Comic Sans MS” dan “Apple Chancery”

Generic Font:fantasy

Font berjenis fantasy adalah jenis font yang memiliki tampilan visual lebih menarik daripada serif, sans-serif, dan monospace, karena memiliki tampilan yang lebih menarik jenis font ini cocok digunakan untuk bagian judul text agar terlihat lebih menarik, untuk jenis font fantasy antara lain : Impact, Chalkduster, Jazz LET, Blippo

Untuk referensi dari tampilan Generic Font silahkan diakses di alamat : https://www.w3.org/Style/Examples/007/fonts.en.html

Kelima dari generic font tersebut bisa ditambahkan sebagai value property font-family, semisal untuk font utamanya adalah Verdana, anda dapat menambahkan salah satu font generic semisal serif, maka ketika komputer client tidak terdapat font Verdana, maka text akan ditampilkan dengan jenis generic font serif.

untuk hasil maksimal sebaiknya anda menggunakan generic fontnya di bagian terakhir, sebagai cadangan jika memang nama font yang ditulis tidak terinstall di komputer pengguna web.

Untuk lebih memahami silahkan perhatikan skrip dibawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Font-Family</title>

#pertama{

font-family:Arial,"Times New Roman",Verdana,Tahoma,serif;

}

#kedua{

font-family:serif;

}

#ketiga{

font-family:sans-serif;

}

#keempat{

font-family:monospace;

}

#kelima{

font-family:cursive;

}

#keenam{

font-family:fantasy;

}

</style>

</head>

<body>

<h2>Sedang Belajar Font-Family</h2>

<p id="pertama">Paragraf Pertama</p>

<p id="kedua">Font Generic : serif</p>

<p id="ketiga">Font Generic : sans-serif</p>

<p id="keempat">Font Generic : monospace</p>

<p id="kelima">Font Generic : cursive</p>

<p id="keenam">Font Generic : fantasy</p>

</body>

</html>

semisal kita simpan dengan nama font-generic.html, lalu kita buka di browser maka hasilnya :

maka hasilnya setiap text ditampilkan dengan menggunakan jenis font yang berbeda.

Baik itu dulu yang bisa kita bahas di tutorial warung belajar kali ini, kita telah belajar mengenai cara merubah jenis font HTML dengan CSS, jika ada yang ingin di diskusikan silahkan di kolom komentar, sampai jumpa di tutorial css berikutnya.