Skip to content
Laviyx Learn

Try

CSS course menu

CSS Fonts: font-family, Font Stacks, Web Fonts, font-size and font-weight

Learn CSS fonts: font-family and fallback font stacks, generic families, system fonts, loading web fonts with @font-face and Google Fonts, font-display, font-size, font-weight, font-style, and the font shorthand.

Beginner5 min readUpdated
On this page

Typography is most of a web page's design. CSS gives you control over which font is used and how big, heavy and slanted it is.

font-family and font stacks#

font-family takes a list of fonts. The browser uses the first one that is available and falls back to the next:

CSS
.serif { font-family: Georgia, "Times New Roman", serif; }
.sans { font-family: Arial, Helvetica, sans-serif; }
.mono { font-family: "Courier New", monospace; }
.system { font-family: system-ui, sans-serif; }
p { font-size: 18px; }
HTML
<p class="serif">Georgia, a serif font</p>
<p class="sans">Arial, a sans-serif font</p>
<p class="mono">Courier New, a monospace font</p>
<p class="system">system-ui, your operating system's interface font</p>
Result
  • Always end with a generic family: serif, sans-serif, monospace, cursive, system-ui. The browser always has one.
  • Put font names that contain spaces in quotes: "Times New Roman".
  • system-ui uses the operating system's own font (Segoe UI on Windows, San Francisco on Apple devices, Roboto on Android). It loads instantly and looks native.

font-family is inherited, so you usually set it once on body.

Web fonts#

To use a font that visitors may not have installed, load it from a file with @font-face:

CSS
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;   /* a variable font covering all weights */
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}
  • WOFF2 is the compressed web font format to use today.
  • font-display: swap shows text immediately in the fallback font and swaps to the web font once it loads, instead of showing invisible text while waiting.
  • Check the font's licence: the fonts on Google Fonts are open source and free to use on websites, but commercial fonts often need a separate web licence.

Google Fonts#

Google Fonts generates the code for you. Choose a font, and it gives you a <link> to put in your HTML head and the font-family value to use:

HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">
CSS
body { font-family: "Poppins", sans-serif; }

Every web font is an extra download. Load only the weights you use, and consider hosting the files yourself, which avoids sending visitors' requests to another company.

font-size#

CSS
html { font-size: 100%; }     /* respect the user's setting, usually 16px */
h1 { font-size: 2rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }
HTML
<h1>2rem heading</h1>
<p>1rem paragraph <small>and 0.875rem small text</small></p>
Result

Use rem for font sizes so text scales with the user's preferences (see Units). Body text of 1rem (16px by default) is a good minimum on most sites. For sizes that grow smoothly with the screen, see clamp() in calc, min, max and clamp.

font-weight and font-style#

CSS
p { font-family: system-ui, sans-serif; margin: 4px 0; }
HTML
<p style="font-weight: 300">300 light</p>
<p style="font-weight: 400">400 normal</p>
<p style="font-weight: 600">600 semibold</p>
<p style="font-weight: 700">700 bold</p>
<p style="font-style: italic">italic</p>
Result
  • font-weight takes normal (400), bold (700) or numbers from 1 to 1000. A weight only looks different if the font has that weight available; otherwise the browser picks the nearest one (and may fake bold).
  • font-style: italic uses the font's italic version.

The font shorthand#

CSS
p {
  font: italic 600 1rem/1.6 Georgia, serif;
  /*    style weight size/line-height family */
}

Size and family are required, and must come last. Like other shorthands, font resets anything you leave out, which can be surprising. Many developers prefer separate properties for clarity.

Practice#

Practice exercise

Set the page to use the system interface font with a sans-serif fallback, headings to use Georgia with a serif fallback at weight 700, and paragraph text at 1.0625rem.

Show solution
CSS
body { font-family: system-ui, sans-serif; }
h1, h2 { font-family: Georgia, serif; font-weight: 700; }
p { font-size: 1.0625rem; }
HTML
<h1>A Georgia heading</h1>
<p>A paragraph in the system font, slightly larger than 1rem.</p>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Text Styling: text-align, line-height, text-decoration, text-transform and SpacingStyle text with CSS: colour, text-align, line-height, letter-spacing and word-spacing, text-decoration and underline offset, text-transform, text-indent, white-space and word-break, text-wrap balance, and readable line length.Beginner4 min readCSSCSS Units: px, em, rem, %, vw, vh, ch and When to Use EachLearn CSS length units with live examples: absolute px, relative em and rem, percentages, viewport units vw, vh, dvh and svh, ch for line length, unitless line-height, and which unit to use for font sizes, spacing and layout.Beginner5 min readCSSCSS Custom Properties (CSS Variables): var(), Fallbacks, Scope and ThemingLearn CSS custom properties (variables): declaring --name values, using var() with fallbacks, global and local scope, inheritance, overriding variables in components and media queries, design tokens, changing them with JavaScript, and @property.Advanced7 min read