Skip to main content

no-missing-font-file

Disallow local @font-face src:url(...) paths that do not resolve to an existing file on disk.

Rule catalog ID: R035

Targeted pattern scopeโ€‹

  • url(...) entries inside @font-face src descriptors.
  • Only local path URLs are checked (for example ./fonts/inter.woff2, ../assets/font.woff2, or font.woff2).

What this rule reportsโ€‹

This rule reports a warning when a local font URL cannot be resolved to a file on disk relative to the stylesheet file.

The rule intentionally skips non-local URL patterns, including:

  • absolute/protocol URLs (https://, http://, data:, etc.)
  • protocol-relative URLs (//cdn.example.com/font.woff2)
  • root-relative URLs (/fonts/inter.woff2)
  • dynamic URL values such as url(var(--font-path))

Why this rule existsโ€‹

Broken local font URLs are easy to miss during development, especially when moving CSS files or reorganizing asset folders.

When this happens, browsers fail to load the font at runtime and silently fall back to another family. This can cause:

  • inconsistent typography across routes/pages
  • avoidable network 404s
  • late visual regressions discovered only after deployment

This rule catches those path issues at lint time.

โŒ Incorrectโ€‹

/* ../fonts/inter.woff2 does not exist relative to this stylesheet */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
}

โœ… Correctโ€‹

/* file exists on disk relative to the stylesheet */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
}
/* remote URLs are intentionally ignored by this rule */
@font-face {
  font-family: "Inter";
  src: url("https://cdn.example.com/inter.woff2") format("woff2");
}

Stylelint config exampleโ€‹

import fontPlugin, { fontPluginConfigs } from "stylelint-plugin-font";

export default {
  ...fontPluginConfigs["font-all"],
  plugins: [...fontPlugin],
  rules: {
    ...fontPluginConfigs["font-all"].rules,
    "font/no-missing-font-file": true,
  },
};

When not to use itโ€‹

Disable this rule if your CSS intentionally uses build-time virtual URL schemes or non-filesystem asset resolvers that cannot be resolved from the source stylesheet path.

Further readingโ€‹