CSS Fonts and Text, TutorialsPoint, CSS Fonts and Text Tutorial

CSS - Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

Font family : is more than one word, it must be in quotation marks, like: "Arial, serif".

More than one font family is specified in a comma-separated list:

Font Family Example :

<html>
   <head>
       <title>Font Family</title>
   </head>
<body>
   
     <p style="font-family:Arial, Helvetica, sans-serif;"> This Font style is " Arial, Helvetica, sans-serif ".</p>
     
     <p style="font-family:'Times New Roman', Times, serif"> This Font style is " 'Times New Roman', Times, serif ".</p>
     
</body>
<html>

Output :

This Font style is " Arial, Helvetica, sans-serif ".

This Font style is " 'Times New Roman', Times, serif ".

Different Types of Fonts

<html>
<head>
   <title>Font Style, Size, Weight, Variants</title>
</head>
<body>
<style type="text/css">
.font_style{ font-style:italic;}
.font_style_2{ font-style:normal;}
.font_style_3{ font-style:oblique;}
 
.font_size{ font-size:24px;}
.font_size_2{ font-size:2em;}
.font_size_3{ font-size:100%;}
 
.font_weight{ font-weight:bold;}
.font_weight_2{ font-weight:normal;}
 
.font_variant{ font-variant:normal;}
.font_variant_2{ font-variant:small-caps;}
</style>
   
      <h3 style="color:#0099da !important;">Font Styles Examples</h3>
      <div class="font_style"> Font style Italic</div>
      <div class="font_style_2"> Font style Normal</div>
      <div class="font_style_3"> Font style Oblique</div>
      
      <h3 style="color:#0099da !important;">Font Sizes Examples</h3>
      <div class="font_size">Font Size</div>
      <div class="font_size_2">Font Size</div>
      <div class="font_size_3">Font Size</div>
      
      <h3 style="color:#0099da !important;">Font Weight Examples</h3>
      <div class="font_weight">Font Weight Bold</div>
      <div class="font_weight_2">Font Weight Normal</div>
      
      <h3 style="color:#0099da !important;">Font Variant Examples</h3>
     <div class="font_variant">Font Varient Normal</div>
     <div class="font_variant_2">Font Varient small-caps</div>
     
   </body>
<html>

Output :

Font Styles Examples

Font style Italic

Font style Normal

Font style Oblique

Font Sizes Examples

Font Size

Font Weight Examples

Font Weight Bold

Font Weight Normal

Font Variant Examples

Font Varient Normal

Font Varient small-caps

CSS Tutorial