CSS Fonts

Typography sets the tone of your site. Define fonts with font-family, adjust weight and style, and load custom fonts using Google Fonts or @font-face.

1) Font Family Stacks (with fallbacks)


body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Always provide a stack that ends with a generic family like serif, sans-serif, or monospace.

System UI stack (fast & native look)
-apple-system, Segoe UI, Roboto…
Serif stack
Georgia, Times New Roman, serif
Monospace stack
Consolas, Courier New, monospace

2) Font Weight & Style


h1   { font-weight: 700; }     /* bold */
p    { font-weight: 400; }     /* normal */
em   { font-style:  italic; }
small{ font-variant:small-caps; }

Bold 700

Use numeric weights for variable fonts when available.

Italic style

Small Caps Sample

3) Font Shorthand


.lead {
  font: italic 500 1.125rem/1.6 "Segoe UI", Roboto, sans-serif;
} /* style weight size/line-height family */

4) Google Fonts (CDN)


<!-- In <head> -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

/* Then use it */
h1, h2 { font-family: "Poppins", -apple-system, "Segoe UI", sans-serif; }
Poppins heading (600) — CDN
Loaded from Google Fonts with display=swap

5) Self-Host with @font-face


@font-face {
  font-family: "Inter";
  src: url("../asset/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900; /* variable font range */
  font-style: normal;
  font-display: swap;  /* show fallback, swap when ready */
}

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

Tip: Use modern woff2 for best compression and font-display: swap to avoid invisible text.

6) Responsive Sizing with rem


html { font-size: 100%; } /* ~16px default */
h1   { font-size: 2rem; }   /* ~32px */
p    { font-size: 1rem; }   /* ~16px */

2rem heading

Scales from the root size.

1rem paragraph

7) Font Features (optional)


code { 
  font-family: "Fira Code", Consolas, monospace;
  font-feature-settings: "calt" 1, "liga" 1; /* contextual & standard ligatures */
}

Some fonts support ligatures and OpenType features for nicer typography.

Best Practices:

  • Always provide font fallbacks in your stacks.
  • Prefer system UI fonts for dashboards/apps (fast, no download).
  • For custom fonts, use woff2 and font-display: swap.
  • Keep font weights to only what you use (e.g., 400 & 700) to reduce payload.
  • Use rem for scalable typography and accessibility.