</>
ValidateHTML

CSS @font-face Syntax Error

@font-face requires at minimum a font-family name and a src with a valid URL. Common mistakes include wrong format hints, broken file paths, missing quotes around font names with spaces, and forgetting to specify font-weight/font-style for variants.

Why It Matters

A broken @font-face rule causes the font to fail loading. The browser falls back to a system font, which changes the entire visual design of your site. Fonts are often the biggest visual impact of a CSS error.

Code Examples

Bad CSS
@font-face {
  src: url(fonts/Inter.woff2);         /* missing font-family */
}

@font-face {
  font-family: My Font;                 /* needs quotes (has space) */
  src: url(fonts/myfont.woff2) format(woff2);  /* format needs quotes */
}
Good CSS
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* prevents invisible text during load */
}

How to Fix

  • 1Always include font-family (quoted if it contains spaces) and src.
  • 2Quote the format hint: format("woff2") not format(woff2).
  • 3Add font-display: swap to prevent invisible text while the font loads.
  • 4Specify font-weight and font-style to avoid browser guessing for variants.

Check Your CSS Now

Our CSS validator detects this error automatically and shows the exact line number.

Open CSS Validator
Recommended

Hostinger — Fast & Affordable Web Hosting

Deploy clean, validated CSS on reliable hosting.

Get 80% Off Hosting →

Related CSS Errors

Invalid CSS Property Value

Learn why CSS property values are invalid and how to fix them. Common mistakes with colors, units, and keywords.

Missing Semicolon in CSS

Why missing semicolons break CSS rules and how to find them. The most common CSS syntax error.

Unclosed CSS Bracket

How unclosed curly braces break your entire stylesheet. Find and fix missing closing brackets.

View all CSS errors