Bad value X for attribute “href” on element “link”: Illegal character in query. “|” is not allowed.

A | (pipe) character in a link element's href attribute is not valid in a URL because it is not a legal character in a query string without being percent-encoded.

This error commonly appears when loading multiple Google Fonts in a single <link> tag using the older Google Fonts API v1 syntax, which used the pipe character to separate font families:

fonts.googleapis.com/css?family=Open+Sans|Roboto

The | character must be encoded as %7C to be valid in a URL. However, even with encoding, the Google Fonts API v1 no longer supports loading multiple families this way. The current Google Fonts API v2 (/css2) uses separate family parameters instead.

Bad example

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto">

Good example

Use the Google Fonts API v2 with separate family parameters:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap">

If you are not using Google Fonts and cannot change the URL structure, percent-encode the pipe character:

<link rel="stylesheet"
  href="https://example.com/css?param1=a%7Cparam2=b">

Learn more:

MDN Reference

MDN: The link element

→

MDN Reference

MDN: What is a URL?

→

WHATWG Spec

WHATWG HTML: Semantics, structure, and APIs of HTML documents

→