How to use a custom font

Short answer

Describe the font with @font-face and use its name in font-family:

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
 
body { font-family: "Brand", system-ui, sans-serif; }

The file lives on your server. The woff2 format has the best compression and is supported by every browser — other formats are not needed today.

Weights and styles

Bold and italic need separate files and separate @font-face rules with the same name but a different font-weight or font-style. Without the file the browser fakes the bold itself, and that looks worse.

A font service

You can load a font with a link in head provided by a font service, for example Google Fonts. The service creates the @font-face rules for you, and you put the font name in font-family. Your own files are more reliable: there are no requests to someone else's server.

While the font loads

font-display: swap shows the text in the fallback font first and swaps it later. Without it the text can stay invisible for several seconds.

Common mistake

People load a whole family of ten weights and use two. Each file means extra kilobytes and delay. Load only the weights that are actually in the design.