Skip to main content

no-protocol-relative-font-url

Disallow protocol-relative URLs (//) in @font-face src declarations.

Rule catalog ID: R021

Targeted pattern scopeโ€‹

  • url(...) entries inside @font-face src declarations.

What this rule reportsโ€‹

  • @font-face src entries that use a protocol-relative URL starting with // (for example url("//cdn.example.com/inter.woff2")).

Why this rule existsโ€‹

Protocol-relative URLs (those starting with //) inherit the protocol of the current page. On an HTTPS page the request uses HTTPS, but on a plain HTTP page the font loads over insecure HTTP. This creates:

  • Security exposure: mixed-content issues can block the font on HTTPS pages in some browsers, and unencrypted font delivery on HTTP pages allows man-in-the-middle attacks that substitute font files.
  • Fragility: the URL silently switches protocols as the hosting environment changes.

The fix is always unambiguous: use an explicit https:// prefix or a relative path. This makes the rule safe to set as "error".

โŒ Incorrectโ€‹

@font-face {
  font-family: "Inter";
  src: url("//cdn.example.com/fonts/inter.woff2") format("woff2");
}

โœ… Correctโ€‹

/* Explicit HTTPS */
@font-face {
  font-family: "Inter";
  src: url("https://cdn.example.com/fonts/inter.woff2") format("woff2");
}
/* Relative path */
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter.woff2") format("woff2");
}

Further readingโ€‹