Web Fonts & @font-face

Web fonts are custom typefaces loaded from servers, allowing any font in designs without relying on system fonts. @font-face defines font sources, weights, and styles.

@font-face Syntax

CSS

/* Define custom font with @font-face */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Use the custom font */
body {
  font-family: 'CustomFont', Arial, sans-serif;
}

/* Multiple weights */
@font-face {
  font-family: 'CustomFont';
  src: url('font-bold.woff2') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: 'CustomFont';
  src: url('font-light.woff2') format('woff2');
  font-weight: 300;
}

Font Formats

Format	Browser Support	Use Case
woff2	Modern browsers	Best compression, modern
woff	All modern browsers	Good compression, compatibility
ttf	All browsers	Larger file size
eot	IE	Legacy IE support

CSS

/* Complete @font-face with fallbacks */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Font display property */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Show fallback while loading */
  /* Other values: auto, block, fallback, optional */
}

Performance Best Practices

CSS

/* 1. Use font-display for better UX */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately */
}

/* 2. Use woff2 format (best compression) */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  /* Fallback to system fonts while loading */
}

/* 3. Load only needed weights/styles */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.woff2') format('woff2');
  font-weight: 400;
}

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

Note

Web fonts allow custom typography. Use @font-face to define sources. Prefer woff2 format. Use font-display: swap for better UX. Load only needed weights.

Google Fonts: [Google Fonts](/css/google-fonts).