Design

Webfont CSS Generator

Generate @font-face CSS.

Family

Font URL

Weight

CSS

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

About Webfont CSS Generator

Generate @font-face CSS.

How to use

1Open the Webfont CSS Generator above and fill in any required inputs.
2Adjust options if the tool exposes them , changes preview live.
3Copy or download the result using the buttons provided.

Tips

Everything runs locally in your browser , your data never leaves the device.
Bookmark this page for quick access next time.

Related tools

Color Palette Generator

Generate beautiful color palettes.

55k

Color Shades Generator

Generate shades and tints of any color.

41k

Gradient Generator

Create CSS gradients visually.

76k

Border Radius Generator

Generate CSS border-radius values.

61k

Box Shadow Generator

Generate CSS box-shadow values.

41k

Glassmorphism Generator

Generate glassmorphism CSS effects.

55k