CSS font-family examples.

CSS: Set Font-Family and Font-Size

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 3 mins read

In this tutorial, you will learn how to set font-family and font-size properties using CSS in HTML pages. In CSS, there are five generic font families, and these are listed below:

CSS Five Font Families

Font-Family NameDescription
serifFonts with tapered, flared, or slab stroke ends.
sans-serifFonts with plain stroke end.
monospaceFonts that use the same width for each character.
cursiveFonts with connected, flowing letters that look like handwriting.
fantasyFonts with decorative styling.

How to Set Font-Family?

The following are the examples to set the font-family property using CSS.

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Lucida, cursive;
font-family: Impact, fantasy;

How to Set Font-Size?

The following are the examples to set the font-size property using CSS.

font-size: 12pt; /* in points */
font-size: 150%; /* as a percent of the parent element */
font-size: 1.5;  /* same as 150% */
font-size: 22px; /* in pixels */

A font-family rule in the body element that is inherited by all descendants

body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 90%;
}

A font-family rule in a descendent that overrides the inherited font family

p {font-family: "Times New Roman", Times, serif;}

Description

  • The fonts specified for the font-family property are searched in the order listed. If you include a font name that contains spaces, the name must be enclosed with quotes.
  • If you specify a generic font last and the web browser can't find any of the order fonts in the list, it will use its default font for the generic font that you specified.
  • All of its descendants inherit the font properties that you set for an element.
  • If you use relative font sizes, the users will be able to vary the sizes by using their browsers. If you use pixels, the font size will vary based on the screen resolution.

Complete Example for font-family and font-size using CSS

In the following CSS example, the five paragraphs are with five different classes and for these classes, five different font-families, and font-sizes specified.

<html lang="en">

<head>
    <style>
        .f1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12pt;
        }
        
        .f2 {
            font-family: "Times New Roman", Times, serif;
            font-size: 150%;
        }
        
        .f3 {
            font-family: "Courier New", Courier, monospace;
            font-size: 87.5%;
        }
        
        .f4 {
            font-family: Lucida, cursive;
            font-size: 22px;
        }
        
        .f5 {
            font-family: Impact, fantasy;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <h1>Font-Family and Font-Size Example</h1>
    <p class="f1">Arial is a sans-serif font that is widely used, and sans-serif fonts are best for web pages.</p>
    <p class="f2">Times New Roman is a serif font. It is the default for most web browsers.</p>
    <p class="f3">Courier New is a monospace font. That is used for code examples.</p>
    <p class="f4">Lucia handwriting is a cursive font. That is not frequently used.</p>
    <p class="f5">Impact is a fantasy font. That is rarely used.</p>
</body>

</html>

Output

The output would be the same as shown in the featured image of this article.

See also: