I have a link element in .html file:

<link href="https://fonts.googleapis.com/css?family=Lora|Merriweather:300,400" rel="stylesheet">

When I throw it in https://validator.w3.org/, it displays this error:

Bad value https://fonts.googleapis.com/css?family=Lora|Merriweather:300,400 for attribute href on element link: Illegal character in query: | is not allowed.

How can I fix that?

CodePudding user response：

UrlEncode the offending | which ends up as |

<link href="https://fonts.googleapis.com/css?family=Lora|Merriweather:300,400" rel="stylesheet">

CodePudding user response：

To display non-standard letters and characters in browsers and plug-ins you need to use hexadecimal values. In your case instead of | you need to use |.

 <link href="https://fonts.googleapis.com/cssfamily=Lora|Merriweather:300,400" rel="stylesheet">

You can check more here