How to Add Custom Fonts to a Website with @font-face

Self-hosting a web font takes about five lines of CSS. Here's the whole process.

Step 1: Get the WOFF2 file

Download the font and place its .woff2 file somewhere in your project, e.g. /fonts/myfont.woff2.

Step 2: Declare it with @font-face

@font-face {
  font-family: "My Font";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 3: Use it

body { font-family: "My Font", system-ui, sans-serif; }

The font-display tip

The font-display: swap line matters. Without it, browsers may hide your text while the font loads ("flash of invisible text"). With swap, the browser shows a fallback immediately and swaps in your font when ready — better perceived performance and a better experience.

Multiple weights

Add one @font-face block per weight/style, each pointing at the right file and setting the matching font-weight. The browser picks the correct file when your CSS asks for font-weight: 700, and so on.

That's the entire technique — no library required.