Fonts in CSS

Fonts in CSS control how text looks and feels on a web page. A font decision is not only a design choice. It affects readability, branding, loading performance, accessibility, and the overall personality of the website. The same paragraph can feel formal, playful, technical, premium, or casual depending on the font family, size, weight, spacing, and line height used.

CSS provides several font-related properties. The most common are font-family, font-size, font-weight, font-style, line-height, and the shorthand property font. Modern CSS also works with web fonts, variable fonts, fallback stacks, and font loading behavior.

Font Family in CSS

The font-family property tells the browser which typeface to use. It can contain one font name or a list of fallback fonts. The browser tries the first font. If that font is not available, it tries the next one.

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

In this example, the browser first tries Atkinson Hyperlegible. If it is not available, it tries Arial. If Arial is not available, it uses any available sans-serif font. This fallback system is important because users may not have the same local fonts installed.

Generic Font Families

Generic font families are broad categories that tell the browser what kind of font is acceptable if the named fonts are unavailable. Common generic families include serif, sans-serif, monospace, cursive, and fantasy.

Generic Family	Typical Use
serif	Books, editorial pages, formal text
sans-serif	Interfaces, blogs, dashboards, modern websites
monospace	Code, terminal text, technical examples
cursive	Decorative handwriting-like text
fantasy	Highly decorative display text

Most websites use sans-serif fonts for body text because they are clean and readable on screens. Monospace fonts are common for code examples because every character takes the same horizontal space.

Font Size

The font-size property controls the size of text. It can use pixels, rem, em, percentages, viewport units, or functions such as clamp().

body {
  font-size: 1rem;
}

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

For body text, rem is a strong default because it relates to the root font size and supports scalable typography systems. For responsive headings, clamp() is useful because it allows text to grow fluidly while still having a minimum and maximum size.

Font Weight

The font-weight property controls how thick or bold the text appears. Common keyword values are normal and bold. Numeric values such as 400, 500, 600, 700, and 800 are also common.

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

Not every font supports every weight. If a font file only includes regular and bold, the browser may simulate missing weights. This can look rough. When using web fonts, load only the weights you need, but make sure those weights actually exist.

Font Style

The font-style property is most often used for italic text. Common values are normal, italic, and oblique.

em {
  font-style: italic;
}

.quote-source {
  font-style: normal;
}

Italic text is useful for emphasis, captions, quotes, and certain labels. It should not be overused in long blocks because large amounts of italic text can be harder to read.

Line Height and Fonts

Fonts need good line height. A font may have beautiful letter shapes but still feel cramped if the lines are too close together. The line-height property controls vertical spacing between lines.

body {
  font-size: 18px;
  line-height: 1.6;
}

A unitless line height is usually recommended because it scales with the font size of each element. Body text often works well around 1.5 to 1.7, but the best value depends on the font, line length, and design.

Font Shorthand

The font shorthand can set multiple font properties in one declaration. It can include style, weight, size, line height, and family. The font size and family are required when using the shorthand.

.intro {
  font: italic 600 1.25rem / 1.5 Georgia, serif;
}

This shorthand is compact, but it can reset font-related values. Use it carefully. Longhand properties are often clearer for beginners and easier to adjust later.

Web Fonts

Web fonts are font files loaded by the browser from the website or a font provider. They allow a site to use fonts that are not installed on the user device. Web fonts are commonly loaded using @font-face or a third-party service.

@font-face {
  font-family: "SiteFont";
  src: url("site-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

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

The woff2 format is widely used because it compresses well. Web fonts should be optimized because large font files can slow page rendering. Loading many weights and styles can make the site heavier than necessary.

Variable Fonts

Variable fonts are modern font files that can contain many variations inside one file. Instead of loading separate files for regular, medium, bold, and extra bold, a variable font can expose a weight axis that CSS can control. This can reduce file management and give designers more flexibility.

.headline {
  font-family: "InterVariable", sans-serif;
  font-weight: 720;
}

Not every font is variable, and not every axis is available in every variable font. Common axes include weight, width, slant, and optical size. Variable fonts are powerful, but they should still be used with performance in mind. One large variable font can still be heavier than a small static font if most of the variation is unused.

System Fonts

System font stacks use fonts already available on the user’s operating system. They load quickly because the browser does not need to download a custom font file. This is useful for dashboards, tools, admin screens, and performance-focused websites.

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

System fonts do not create a unique brand identity the way a custom typeface can, but they are fast and reliable. The tradeoff is between brand control and performance. For many interfaces, system fonts are a practical choice.

Font Smoothing and Rendering

Fonts can look slightly different across operating systems and browsers because text rendering engines are different. A font may appear heavier on one system and lighter on another. CSS has properties such as -webkit-font-smoothing, but these should be used carefully because they are not universal solutions.

Instead of trying to force identical rendering everywhere, choose fonts that remain readable across platforms. Test important pages on more than one browser when typography matters.

Fallback Fonts

Fallback fonts protect the design when the preferred font is unavailable or still loading. A good fallback should be visually close to the primary font. If the fallback is too different, the page may shift when the web font loads.

.article {
  font-family: "Merriweather", Georgia, serif;
}

Here, Georgia is a reasonable fallback for a serif article font. The final generic family, serif, gives the browser one more fallback category.

Font Loading and Performance

Fonts affect performance because the browser may need to download font files before text appears in the intended style. If font loading is poorly configured, users may see invisible text, delayed text, or sudden layout shifts.

The font-display descriptor inside @font-face can control loading behavior. The value swap allows fallback text to appear quickly and then swap to the web font when it loads.

@font-face {
  font-family: "SiteFont";
  src: url("site-font.woff2") format("woff2");
  font-display: swap;
}

Font Pairing

Font pairing means choosing fonts that work well together. A common pattern is one font for headings and another font for body text. The heading font can have more personality, while the body font should stay highly readable. Pairing too many fonts makes a design feel inconsistent.

For technical content, code examples also need a monospace font. A good programming article may use a readable sans-serif for paragraphs, a stronger display font for headings, and a clean monospace font for code. Each font has a job.

Font Inheritance

Font properties usually inherit. If you set font-family on the body, child elements inherit it unless they define a different font. This is why global typography rules are often placed on body. It avoids repeating the same font declaration on every paragraph, list item, and table cell.

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

code {
  font-family: "Fira Code", monospace;
}

Here, normal content inherits the body font, while code uses a separate monospace font. This keeps the typography consistent without unnecessary repetition.

This also makes future typography changes safer because the main font can be changed in one place.

Use inheritance instead of repeating font rules everywhere.

This keeps typography consistent.

Readable Font Choices

Readable typography is more important than decorative typography for learning pages, documentation, blogs, and technical articles. Choose fonts with clear letter shapes, enough spacing, and good support for numbers, punctuation, and code-related symbols when needed.

• Use readable fonts for body text.
• Keep decorative fonts for short headings or accents.
• Use consistent font sizes across similar sections.
• Avoid loading too many font families and weights.
• Use fallback fonts that match the primary font style.
• Test typography on mobile screens, not only desktop.

Common Font Mistakes in CSS

• Using too many different fonts on one page.
• Loading many unused font weights.
• Using tiny body text to make a design look compact.
• Using decorative fonts for long paragraphs.
• Forgetting fallback fonts.
• Setting line height too low for the selected font.

Fonts in CSS FAQ

Which CSS property changes the font?

The font-family property changes the typeface used by text.

What is a font stack?

A font stack is a list of fonts in font-family. The browser tries them in order until it finds one available.

Should I use px or rem for font size?

rem is a strong default for scalable typography. px can still be used intentionally, but rem usually fits responsive systems better.

Why does my font look different on another device?

The preferred font may not be installed or loaded, so the browser may use a fallback font. Rendering can also vary by operating system and browser.

---