CSS Fonts & Web Fonts Reference

CSS Fonts & Web fonts

Load anything from default system fonts to custom downloaded fonts.

Web-safe fallbacks

Fonts most devices have: Arial, Verdana, Times New Roman, Georgia, Courier New, Trebuchet MS.

Always end with a generic family so the browser has a safe fallback:

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

@font-face

Bring your own font files:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}
p {
  font-family: "MyFont", sans-serif;
}

Google Fonts

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

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

font-display: swap

Prevent invisible text while the font loads:

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

Variable fonts

A single font file holds many weights. font-variation-settings or just font-weight range:

@font-face {
  font-family: "Flex";
  src: url("flex.woff2") format("woff2");
  font-weight: 100 900;   /* variable weight range */
}

TL;DR

• Always add a safe fallback family.
• @font-face loads local files (woff2 is best).
• font-display: swap prevents blank text.
• Google Fonts = quickest custom type.
• Variable fonts = one file, many weights.