Web Safe Fonts - HTML CSS CSS

HTML CSS examples for CSS:Font

  1. HOME
  2. HTML CSS
  3. CSS
  4. Font

Introduction

The font-family property should hold several font names as a "fallback" system.

If the browser does not support the first font, it tries the next font.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {<!--   w  w  w .  j  a va 2s  .  com-->
    font-family: "Times New Roman", Times, serif;
}

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

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Below are some commonly used font combinations, organized by generic family.

Serif Fonts

font-family Example text
Georgia, serif

This is a heading

This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph
"Times New Roman", Times, serif

This is a heading

This is a paragraph

Sans-Serif Fonts

font-familyExample text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph
Impact, Charcoal, sans-serif

This is a heading

This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph
Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph
"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph
Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph
"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

Related Tutorials