Prev Next

CSS Font Family

The font-family property specifies which font is used for text. You can list multiple fonts as fallbacks, ensuring readable text even if a preferred font isn’t available. Picking the right font family sets the tone and style of your content.

Key Topics

Font Family Stacks

Specify fonts in order, e.g. font-family: "Open Sans", Arial, sans-serif;. The browser uses the first available font.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Family Example</title>
    <style>
        body {
            font-family: "Trebuchet MS", Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Heading with a Preferred Font</h1>
    <p>If "Trebuchet MS" is unavailable, Verdana or a default sans-serif font will be used.</p>
</body>
</html>

Explanation: Using a font stack ensures text remains readable and styled, even if your first-choice font isn’t installed on the user’s device.

Serif vs. Sans-Serif

Serif fonts (with decorative strokes) are often used for print or traditional feel, while sans-serif fonts (without strokes) offer a modern, clean look. Choose based on brand personality and readability.

Key Takeaways

  • Fallbacks: List multiple fonts for better reliability.
  • Styles: Serif vs. sans-serif affects tone and readability.
  • Brand Consistency: Match fonts to your site’s visual identity.
Prev Next