CSS Fonts

What Are CSS Fonts?

CSS fonts define how text is displayed on a webpage. They control the typeface, size, weight, style, spacing, and readability of content.

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Every website uses fonts for headings, paragraphs, buttons, forms, navigation, and other content elements.

Why CSS Fonts Are Important

• Improve content readability.
• Strengthen branding and design consistency.
• Support accessibility requirements.
• Enhance user experience.
• Help users scan content faster.
• Support responsive web design.
• Improve engagement and content consumption.

CSS Fonts Cheatsheet

CSS font-family

The font-family property specifies which font should be used.

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

Always include fallback fonts in case the preferred font is unavailable.

Common Font Families

CSS font-size

The font-size property controls the size of text.

body {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem;
}

Common Units for Fonts

CSS font-weight

Font weight controls text thickness.

h1 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

CSS font-style

.quote {
  font-style: italic;
}

.normal {
  font-style: normal;
}

Italics are commonly used for quotes, citations, and emphasis.

CSS line-height

Line height controls vertical spacing between lines of text.

body {
  line-height: 1.6;
}

A line height between 1.5 and 1.8 is typically recommended for long-form content.

Letter and Word Spacing

h1 {
  letter-spacing: 1px;
}

p {
  word-spacing: 2px;
}

These properties improve readability and branding when used carefully.

Using Google Fonts

Google Fonts provides free web fonts that can be used on websites.

<link
  rel="preconnect"
  href="https://fonts.googleapis.com"
/>

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: "Inter", sans-serif;
}

Popular Google Fonts include Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, and Merriweather.

Using Custom Web Fonts

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
}

body {
  font-family: "MyFont", sans-serif;
}

Self-hosted fonts provide more control and can improve privacy and performance.

Responsive Typography

Font sizes should adapt to different screen sizes.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

The clamp() function creates fluid typography that scales smoothly between minimum and maximum values.

Popular Font Pairing Examples

CSS Fonts and Accessibility

• Use readable font sizes.
• Maintain adequate line height.
• Avoid overly decorative fonts for body content.
• Ensure sufficient color contrast.
• Support browser zoom and text resizing.
• Use responsive typography.

body {
  font-size: 1rem;
  line-height: 1.6;
}

CSS Fonts and SEO

Fonts do not directly affect search rankings, but typography impacts user experience, readability, accessibility, and engagement.

• Readable text improves user engagement.
• Accessible typography improves usability.
• Optimized web fonts improve page speed.
• Better reading experience can reduce bounce rates.

Common CSS Font Mistakes

• Using too many font families.
• Using tiny font sizes.
• Ignoring line-height.
• Loading unnecessary font weights.
• Using decorative fonts for body text.
• Not providing fallback fonts.
• Using fixed pixel typography everywhere.

CSS Font Best Practices

• Use 1–2 font families across a website.
• Prefer modern web fonts such as Inter or Roboto.
• Use rem units for scalable typography.
• Use clamp() for responsive font sizing.
• Keep body text readable.
• Limit loaded font weights.
• Use font-display: swap for performance.
• Test typography on mobile devices.
• Maintain adequate line-height.
• Always include fallback fonts.

Key Takeaways

• CSS fonts control how text appears on web pages.
• font-family defines the typeface.
• font-size controls text size.
• font-weight controls thickness.
• line-height improves readability.
• Responsive typography improves user experience.
• Good typography supports accessibility and SEO.