</>
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.

Common Causes

  • Declaring src without a font-family, so the loaded file is never tied to a usable name.
  • Writing a font-family name that contains a space without quoting it.
  • Pointing src at a wrong or relative path so the file returns a 404 and the font never loads.

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.

Frequently Asked Questions

What is the minimum a valid @font-face needs?
A font-family name and a src pointing to a reachable font file. Without both, the rule cannot register a usable font, so the browser silently falls back to a system typeface.
Why is my web font not loading?
Most often the src path is wrong and the file 404s, or the format hint is malformed. Check the Network tab for the font request, and confirm the path is correct relative to the CSS file, not the HTML.
What does font-display: swap do?
It tells the browser to show a fallback font immediately and swap in your web font once it loads, preventing a flash of invisible text. It does not fix syntax errors, but it improves the loading experience.

Check Your CSS Now

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

Open CSS Validator
Recommended

Cloudways · Managed Cloud Hosting

Fix this CSS error, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean).

Free 3-day trial · 30% off 3 months + free site migration with code MIGRATE303

Start free trial

Related CSS Errors

Invalid CSS Property Value

Learn why an invalid CSS property value silently breaks your styling, and how to fix the common color, unit, keyword, and function mistakes quickly.

Missing Semicolon in CSS

A missing semicolon is the most common CSS error, and it quietly breaks two rules at once. Learn why it happens and how to find and fix it in seconds.

Unclosed CSS Bracket

An unclosed curly brace can break your entire stylesheet at once. Learn how a missing closing bracket cascades, and how to locate and fix it quickly.

View all CSS errors