Web Safe Font di CSS: Code dan Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 14, 2020

Section Artikel

1 Kombinasi Font yang Biasa Digunakan
2 Serif Fonts
3 Sans-Serif Fonts
4 Monospace Fonts

Kombinasi Font yang Biasa Digunakan

Properti font-family harus memiliki beberapa nama font sebagai sistem “fallback”, untuk memastikan kompatibilitas maksimum antara browser / sistem operasi. Jika browser tidak mendukung font pertama, browser mencoba font berikutnya.

Mulailah dengan fonta yang Anda inginkan, dan akhiri dengan keluarga generik, untuk membiarkan browser memilih font yang serupa dalam keluarga generik, jika tidak ada font lain yang tersedia:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<p class = "a"> Ini adalah paragraf, ditampilkan dengan font Times New Roman. </p>

<p class = "b"> Ini adalah paragraf, ditampilkan dengan font Arial. </p>

</body>
</html>

Serif Fonts

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font-family: Georgia, serif;
}

p.b {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
p.c {
  font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<p class = "a"> Ini adalah paragraf, ditampilkan dengan font Georgia. </p>

<p class = "b"> Ini adalah paragraf, ditampilkan dengan font Palatino Linotype. </p>
  
<p class = "c"> Ini adalah paragraf, ditampilkan dengan font Times New Roman. </p>

</body>
</html>

Sans-Serif Fonts

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font-family: Arial, Helvetica, sans-serif;
}

p.b {
  font-family: "Arial Black", Gadget, sans-serif	;
}
p.c {
  font-family: "Comic Sans MS", cursive, sans-serif	;
}
p.d {
  font-family: Impact, Charcoal, sans-serif	;
}
p.e {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif	;
}
p.f {
  font-family: Tahoma, Geneva, sans-serif	;
}
p.g {
  font-family: "Trebuchet MS", Helvetica, sans-serif	;
}
p.h {
  font-family: Verdana, Geneva, sans-serif	;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<p class = "a"> Ini adalah paragraf, ditampilkan dengan font Arial. </p>

<p class = "b"> Ini adalah paragraf, ditampilkan dengan font Arial Black. </p>
  
<p class = "c"> Ini adalah paragraf, ditampilkan dengan font Comic Sans MS. </p>
  
<p class = "d"> Ini adalah paragraf, ditampilkan dengan font Impact. </p>
  
<p class = "e"> Ini adalah paragraf, ditampilkan dengan font Lucida Sans Unicode. </p>
  
<p class = "f"> Ini adalah paragraf, ditampilkan dengan font Tahoma. </p>
  
<p class = "g"> Ini adalah paragraf, ditampilkan dengan font Trebuchet MS. </p>
  
<p class = "h"> Ini adalah paragraf, ditampilkan dengan font Verdana. </p>

</body>
</html>

Monospace Fonts

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font-family: "Courier New", Courier, monospace;
}

p.b {
  font-family: "Lucida Console", Monaco, monospace;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>

<p class = "a"> Ini adalah paragraf, ditampilkan dengan font Courier New. </p>

<p class = "b"> Ini adalah paragraf, ditampilkan dengan font Lucida Console. </p>

</body>
</html>