CSS Custom Fonts

@font-face

The @font-face rule allows you to load custom fonts into your website. This means you are not limited to system fonts.

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

Once defined, you can use the font with font-family:

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

Font Formats

Common web font formats:

• WOFF2 – modern and recommended (best compression)
• WOFF – widely supported fallback
• TTF – older format, larger file size
• OTF – similar to TTF

Best practice: Always provide woff2 first, then woff as fallback.

Using Custom Fonts

You can define multiple font weights and styles using separate @font-face rules.

@font-face {
  font-family: "MyFont";
  src: url("myfont-bold.woff2") format("woff2");
  font-weight: 700;
}

@font-face {
  font-family: "MyFont";
  src: url("myfont-regular.woff2") format("woff2");
  font-weight: 400;
}

This allows proper font switching when using font-weight.

font-display

The font-display descriptor controls how fonts are loaded and rendered.

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

Common values:

• auto – browser default
• swap – shows fallback text immediately, swaps when font loads
• block – hides text briefly until font loads
• fallback – short block period, then fallback

Recommended: Use font-display: swap to improve perceived performance and avoid invisible text (FOIT).

Summary

• @font-face loads custom fonts.
• Use woff2 as primary format.
• Define separate weights and styles for better control.
• Use font-display: swap for better user experience.