no-http-font-url

Disallow plain http:// URLs in @font-face src declarations.

Rule catalog ID: R028

Targeted pattern scope

The src descriptor inside every @font-face block.

What this rule reports

@font-face src entries whose URL starts with http:// (case-insensitive).

Why this rule exists

Loading fonts over plain HTTP from an HTTPS page is a mixed-content request. Modern browsers block mixed-content resource loads by default, which means the font will silently fail to download and the browser will fall back to the next font-family stack entry. This causes:

Silent visual regressions — text renders in a fallback font with no error in the stylesheet, only a network-level console warning.
Security exposure — unencrypted HTTP font transfers can be intercepted and replaced by a man-in-the-middle attacker, enabling font-based attacks or serving altered glyphs.
SEO/Core Web Vitals impact — mixed-content warnings appear in Lighthouse audits and may affect site ranking signals.

Use https:// for third-party font hosts, or prefer relative paths for self-hosted assets.

❌ Incorrect

/* Plain HTTP — blocked as mixed content on HTTPS pages */
@font-face {
  font-family: "Inter";
  src: url("http://fonts.example.com/inter.woff2") format("woff2");
}

✅ Correct

/* HTTPS — secure and safe */
@font-face {
  font-family: "Inter";
  src: url("https://fonts.example.com/inter.woff2") format("woff2");
}

/* Relative path — even better for self-hosted fonts */
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter.woff2") format("woff2");
}

Stylelint config example

{ "font/no-http-font-url": true }

When not to use it

Disable this rule when your project is intentionally served over HTTP only (e.g., a local development environment without HTTPS). In that case you may want to allow http:// font URLs.

Targeted pattern scope​

What this rule reports​

Why this rule exists​

❌ Incorrect​

✅ Correct​

Stylelint config example​

When not to use it​

Further reading​