0
0
CSSmarkup~5 mins

Font family in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Font family lets you choose how text looks by picking different styles of letters. It helps make your website easy to read and nice to look at.

When you want your website text to look friendly or serious by changing the style of letters.
When you want to match your website's style with a brand or theme using specific fonts.
When you want to make sure your text looks good on different devices by listing backup fonts.
When you want to improve reading by choosing clear and simple fonts for paragraphs.
When you want to add personality to headings by using decorative or unique fonts.
Syntax
CSS
font-family: fontName, fallbackFont, genericFamily;

Use commas to separate multiple font names.

Always end with a generic family like serif, sans-serif, or monospace as a backup.

Examples
This tries Arial first, then Helvetica if Arial is not available, and finally any sans-serif font.
CSS
font-family: Arial, Helvetica, sans-serif;
Uses 'Times New Roman' font, or Times, or any serif font as last option.
CSS
font-family: 'Times New Roman', Times, serif;
Uses monospace fonts good for code or fixed-width text.
CSS
font-family: 'Courier New', Courier, monospace;
Uses a fun cursive font, with cursive and sans-serif as backups.
CSS
font-family: 'Comic Sans MS', cursive, sans-serif;
Sample Program

This page shows how different font families change text style. The heading uses a serif font called Georgia, paragraphs use monospace fonts, and the body uses a clean sans-serif font.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Family Example</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 2rem;
      line-height: 1.5;
    }
    h1 {
      font-family: Georgia, serif;
      color: #2a2a2a;
    }
    p {
      font-family: 'Courier New', Courier, monospace;
      background-color: #f0f0f0;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to Font Family Demo</h1>
  <p>This paragraph uses a monospace font to look like code.</p>
  <p>The rest of the page uses Arial or similar sans-serif fonts for easy reading.</p>
</body>
</html>
OutputSuccess
Important Notes

Put font names with spaces inside quotes, like 'Times New Roman'.

Always list multiple fonts to make sure text looks good if the first font is missing.

Generic families help browsers pick a similar font if none of your listed fonts are available.

Summary

Font family controls the style of text by choosing fonts.

List fonts separated by commas, ending with a generic family.

Use quotes for font names with spaces.