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?
UrlEncode the offending | which ends up as %7C
<link href="https://fonts.googleapis.com/css?family=Lora%7CMerriweather:300,400" rel="stylesheet">
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 %7C.
<link href="https://fonts.googleapis.com/cssfamily=Lora%7CMerriweather:300,400" rel="stylesheet">
You can check more here