CSS Font Family

Please Share On:

Definition:

There are two types of CSS Font Family i.e, generic family and font family. The Generic family like “Serif” and “Monospace” have a similar font family and the font-family like “Times New Roman” and “Arial” have a specific font family.

The font-family property is used to set the text of the font family. It is specified by more than one font family by separating with commas. If your browser does not support the first font, it tries the second font, and so on.

Syntax:

font-family: "Times New Roman", Times, serif;

Property Value:

- Arial
- Times New Roman
- Helvetica
- Courier etc.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .serif {
      border: 3px solid black;
      background-color: pink;  
      font-family: "Times New Roman", Times, serif;
    }

    .sans-serif {
      border: 3px solid black;
      background-color: pink;
      font-family: Arial, Helvetica, sans-serif;
    }

    .monospace {
      border: 3px solid black;
      background-color: pink;
      font-family: "Lucida Console", Courier, monospace;
    }
    </style>
  </head>

  <body>
    <p class="serif">This is a paragraph in the Times New Roman font.</p>
    <p class="sans-serif">This is a paragraph in the Arial font.</p>
    <p class="monospace">This is a paragraph in the Lucida Console font.</p>
  </body>
</html>

Output:


Donate to support writers


You may be interested in the following topics:

CSS Font (All Properties)

Please Share On:

Definition:

CSS font properties define the font family, style, size, and weight of a text. It is a shorthand for font-family, font-style, font-size, font-weight, font-stretch and font-variant.

Property Values:

CSS FontsDescriptions
Font Familyset the font family of a text
Font Sizeset the font size
Font Stylestyle your font
Font Stretchstretch your font
Font Variantchanges the font into small caps
Font Weightset the boldness of the font
Font Kerningset the space between letters
Font Googleuse the google fonts on your page

Click on each link to read more about each CSS Font.



You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial