Google fonts URL break HTML5 Validation on w3.org - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I load 3 fonts in different sizes using this HTML tag:
&link rel="stylesheet" type="text/css" href="/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
for HTML5; now it gives this error:
Line 14, Column 163: Bad value /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?
2,92382439
1,04941526
Url encode the | (pipe characters) in the href attribute (%7C):
&link rel="stylesheet" type="text/css" href="/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif"&
10.4k32345
You must replace the character | by its corresponding UTF-8 character, which gives
href="/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&effect=shadow-multiple"
114k30226259
I scape & with "&" and works fine, example:
&link href='/css?family=Open+Sans+Condensed:300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' /&
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="/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="/css?family=Open+Sans:400,600,300,800,700,400italic"&
&link rel="stylesheet" type="text/css" href="/css?family=PT+Serif:400,400italic"&
&link rel="stylesheet" type="text/css" href="/css?family=Bree+Serif"&
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
The week's top questions and answers
Important community announcements
Questions that need answers
By subscribing, you agree to the
Stack Overflow works best with JavaScript enabled}