Web Safe Font Family - HTML CSS CSS

HTML CSS examples for CSS:Font

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

Introduction

Web-safe fonts are fonts that are extremely common.

The following table lists the font's combinations that are most safe to use.

font-family Normal Bold
Arial, Helvetica, sans-serif This is normal text. This is bold text.
"Times New Roman", Times, serif This is normal text. This is bold text.
"Courier New", Courier, monospace This is normal text. This is bold text.

The following example shows you how to set the font-family property.

Example

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS Web Safe Fonts</title>
  <style type="text/css">
  .sans-serif-font {
    font-family: Arial, Helvetica, sans-serif;
  }<!-- ww w .ja va2 s .  c o  m-->
  .serif-font {
    font-family: "Times New Roman", Times, serif;
  }
  .monospace-font {
    font-family: "Courier New", Courier, monospace;
  }
</style>
 </head>
 <body>
  <h2>Normal Text</h2>
  <p class="sans-serif-font">This is normal text in sans-serif font.</p>
  <p class="serif-font">This is normal text in serif font.</p>
  <p class="monospace-font">This is normal text in monospace font.</p>
  <h2>Bold Text</h2>
  <p class="sans-serif-font"><b>This is bold text in sans-serif font.</b></p>
  <p class="serif-font"><b>This is bold text in serif font.</b></p>
  <p class="monospace-font"><b>This is bold text in monospace font.</b></p>
 </body>
</html>
font-family Normal Bold
Arial, Helvetica, sans-serif

This is normal text.

This is bold text.
"Times New Roman", Times, serif

This is normal text.

This is bold text.
"Courier New", Courier, monospace

This is normal text.

This is bold text.

Related Tutorials