CODEWITHSUNDEEP
htmlw3c-validationgoogle-font-api
Octavian
Octavian

Reputation: 4579

Google fonts URL break HTML5 Validation on w3.org

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?

Upvotes: 197

Views: 62861

Answers (5)

steveax
steveax

Reputation: 17743

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">

Upvotes: 358

Well Smith
Well Smith

Reputation: 791

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

Upvotes: -3

user2757283
user2757283

Reputation:

There are 2 ways to fix this validation problem:

  1. 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">

  2. 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">

Upvotes: 10

Oscar Tello
Oscar Tello

Reputation: 1

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' />

Upvotes: -4

lapouth
lapouth

Reputation: 61

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"

Upvotes: 6

Related Questions