@font-face Declaration Builder

Compose a CSS @font-face rule from family, weight, style and sources.

Fields

font-family WOFF2 URL WOFF URL (optional) font-weight font-style font-display

@font-face

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

About this tool

Generates an @font-face rule with font-display: swap by default. Add multiple source URLs to fall back through formats.