@font-face CSS Generator

Generate @font-face CSS rules for custom web fonts.

Font Family

Font Display

Font Variants

Weight

Style

URL

Format

Weight

Style

URL

Format

Generated CSS (2 variants):

@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}