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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-href-on-element-link-illegal-character-in-query-is-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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:

```html
<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:

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