CSS Fonts

font-family

font-family sets the typeface for an element. You give it a list of fonts separated by commas. The browser uses the first one it finds installed; if none match, it falls back to the last one.

Always end the list with a generic family (serif, sans-serif, or monospace) so the browser has a safe fallback.

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

If a font name contains spaces, wrap it in quotes.

System font stack

A system font stack tells the browser to use the operating system’s native UI font. This loads instantly (no network request) and looks familiar to users on each platform.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

font-size

Prefer rem over px for font sizes. rem is relative to the root font size (usually 16px in most browsers) and respects the user’s browser font size preference, which improves accessibility.

html {
  font-size: 16px; /* base */
}

h1 {
  font-size: 2.5rem;   /* 40px */
}

h2 {
  font-size: 1.75rem;  /* 28px */
}

body {
  font-size: 1rem;     /* 16px */
}

font-weight

Controls how bold or light the text appears. Numeric values (100 to 900) give more control than bold or normal alone.

400 is normal weight
700 is bold
300 is light (if the font supports it)

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

.thin {
  font-weight: 300;
}

font-style

Makes text italic or oblique. The default is normal.

em {
  font-style: italic;
}

.label {
  font-style: normal;
}

Google Fonts

Google Fonts offers thousands of free, open-source web fonts. Add the <link> tag to your HTML <head>, then reference the font name in your CSS.

<head>
  <link rel="stylesheet" href="styles.css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
    rel="stylesheet"
  />
</head>

h2 {
  font-family: 'Playfair Display', serif;
}

@font-face

@font-face loads a font file from your own server. Use the woff2 format; it is the most compressed and widely supported.

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

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

font-display: swap tells the browser to show text in a fallback font immediately, then swap to the web font once it has loaded. Without it, text can be invisible during the download.

line-height

Controls the space between lines of text. Use a unitless number like 1.5 rather than a pixel value. A unitless value scales relative to the font size, so it stays proportional if the font size changes.

line-height: 1.5 on a 16px font produces 24px of space between lines.

p {
  line-height: 1.5;
}

h1 {
  line-height: 1.2; /* tighter for large headings */
}

letter-spacing

Adjusts the space between individual characters. Use em units so the spacing scales with the font size.

h1 {
  letter-spacing: -0.01em; /* slightly tighter */
}

.label {
  letter-spacing: 0.1em; /* spaced out, often used for uppercase labels */
}

font-variant

font-variant: small-caps renders lowercase letters as smaller capital letters. Useful for headings and labels.

.subtitle {
  font-variant: small-caps;
}