CSS Fonts, How to Use font-family, font-size, and Styling Properties

CSS Font

In CSS, font properties are used to control the appearance of text on a webpage. These properties allow you to change the font family, size, weight, style, and other text-related characteristics to improve readability and design.

Font-Related CSS Properties

1. font-family

Defines the typeface for the text. You can provide a comma-separated list of font names. The browser uses the first available font.

p {
  font-family: Arial, Helvetica, sans-serif;
}

Arial: Primary font

Helvetica: Fallback

sans-serif: Generic fallback if none are available

2. font-size

Sets the size of the font using units like px, em, %, or keywords like small, medium, large.

h1 {
  font-size: 24px;
}

3. font-weight

Controls the boldness of the text. Values can be:

normal, bold, lighter, bolder

Numeric: 100, 200, ..., 900

strong {
  font-weight: bold;
}

4. font-style

Specifies the style: normal, italic or oblique.

em {
  font-style: italic;
}

5. font-variant

Used to display text in small caps.

.small-caps {
  font-variant: small-caps;
}

6. line-height

Sets the space between lines of text. It can be unitless (recommended) or in px, em, etc.

p {
  line-height: 1.5; /* 1.5x font size */
}

Example:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    body {  
      font-size: 100%;  
    }  
    h1 { color: red; }  
    h2 { color: #9000A1; }   
    p  { color: rgb(0, 220, 98); }   
  </style>  
</head>  
<body>  
  <h1>This is heading 1</h1>  
  <h2>This is heading 2</h2>  
  <p>This is a paragraph.</p>  
</body>  
</html>

Output:

CSS font-family in Detail

The font-family property lets you define a preferred font stack:

.selector {
  font-family: "Roboto", "Arial", sans-serif;
}

FontName: Primary choice (e.g., "Roboto")

FallbackFont: Secondary font (e.g., "Arial")

Generic Family: Safe fallback (e.g., sans-serif)

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-size: 100%;
    }
    h1 {
      font-family: sans-serif;
    }
    h2 {
      font-family: serif;
    }
    p {
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>This heading is shown in sans-serif.</h1>
  <h2>This heading is shown in serif.</h2>
  <p>This paragraph is written in monospace.</p>
</body>
</html>

Output: