Google fonts URL break HTML5 Validation on w3.org
HtmlW3c ValidationGoogle Font-ApiHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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">
Solution 2 - Html
There are 2 ways to fix this validation problem:
-
URL encode the
|
(vertical bar/line) character in thehref
attribute of thelink
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">
Solution 3 - Html
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&effect=shadow-multiple"
Solution 4 - Html
Solution 5 - Html
I scape & with "& amp;" and works fine, example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />