Google fonts URL break HTML5 Validation on w3.org

Question

I load 3 fonts in different sizes using this HTML tag:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif">

Till ~1/2 weeks ago this was supported by w3.org validator for HTML5; now it gives this error:

 Line 14, Column 163: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif for attribute href on element link: Illegal character in query: not a URL code point.

What's the things the W3C Markup Validator does not like now?

score 358 · Accepted Answer · edited Sep 04 '18 at 04:46

358

URL encode the | (pipe characters) in the href attribute (%7C):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">

edited Sep 04 '18 at 04:46

Exil

311
2
11
26

answered Mar 18 '14 at 02:20

steveax

17,527
6
44
59

1

Is this an issue with Google generated URL or an issue with w3 validator? Does any spec actually require pipe character to be encoded in HTML attribute? – Mikko Rantalainen Sep 20 '17 at 06:08
2

@MikkoRantalainen, [RFC 1738](https://www.ietf.org/rfc/rfc1738.txt) notes that the pipe character is unsafe: Other characters are unsafe because gateways and other transport agents are known to sometimes modify such characters. These characters are "{", "}", "|", "\", "^", "~", "[", "]", and "`". – steveax Oct 20 '17 at 04:37
2

I would expect raw UTF-8 to be valid in UTF-8 encoded HTML without encoding other characters but those used for HTML e.g. `&`, `"` and `'`. And those special characters would need to be encoded by HTML rules (e.g. `&amp` etc). The user agent is then expected to follow RFC 3987 and convert the IRI to percent encoded UTF-8 before submitting it over HTTP (https://tools.ietf.org/html/rfc3987). – Mikko Rantalainen Oct 23 '17 at 06:30
Interestingly, my Google Font link to Open Sans didn't contain a pipe, but rather a blank between "Open" and "Sans". Replacing the blank by a "+" solved the problem for me. – Marius Hofert Oct 11 '22 at 04:31

score 10 · Answer 2 · edited Jun 20 '17 at 17:11

10

There are 2 ways to fix this validation problem:

URL encode the | (vertical bar/line) character in the href attribute of the link element (as %7C) :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">

Separate fonts inclusion with multiple link elements :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Serif:400,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bree+Serif">

edited Jun 20 '17 at 17:11

dippas

58,591
15
114
126

answered May 24 '15 at 14:48

2

I know this is older post, but does anyone know if there is any performance (dis)advantage to separating `` tags? Does Google compress if multiple fonts are in one call? – Patrick Moore Sep 07 '16 at 20:09
@PatrickMoore 2 things: **a)** your server upload/response speed vs your end-user download speed **b)** time to create another connection (server response time vs end-user response time), theoretically, if you are loading 2 "heavy" fonts and your page is otherwise loading fast, loading them separately (in a paralel way) could result in faster load. But it really depends on a) & b) – jave.web Dec 25 '16 at 03:05

score 6 · Answer 3 · edited Apr 04 '14 at 05:15

6

http://www.utf8-chartable.de/

You must replace the character | by its corresponding UTF-8 character, which gives

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&amp;effect=shadow-multiple"

edited Apr 04 '14 at 05:15

Michael Myers

188,989
46
291
292

answered Mar 25 '14 at 09:05

lapouth

61
1

score -3 · Answer 4 · answered May 26 '18 at 13:35

-3

My case was crazy line break character. Please see the attached image.

answered May 26 '18 at 13:35

Well Smith

733
7
10

score -4 · Answer 5 · answered May 15 '15 at 08:59

-4

I scape & with "& amp;" and works fine, example:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />

answered May 15 '15 at 08:59

Oscar Tello

1

1

This question is about `|` character, not `&` ;-) – jave.web Dec 25 '16 at 02:45

Google fonts URL break HTML5 Validation on w3.org

5 Answers5

Linked

Related