1

I'm working on an assignment, and I am using Google Fonts for my site. I'm trying to validate my HTML using W3C, as my assignments must be valid to get full marks, and I keep on getting an error for the Google Font code. I can't seem to figure out why. Here's the code: 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Orbitron|Special+Elite|Open+Sans">

Here's the error message I am getting from W3C:

Bad value http://fonts.googleapis.com/css?family=Orbitron|Special+Elite|Open+Sans for attribute href on element link: Illegal character in query: not a URL code point.

…href="http://fonts.googleapis.com/css?family=Orbitron|Special+Elite|Open+Sans">

Syntax of IRI reference: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

Any thoughts? I'm pretty new to HTML5, so I'm unsure what I'm missing here.

coykiwi
  • 11
  • 1
  • 2

2 Answers2

11

The offending character here is “|” U+007C VERTICAL LINE, used by Google as a separator between font names; that’s a poor choice by them, since “|” is a reserved character, both by the “URL Living Standard” (which is what the HTML5 CR cites) and by the Internet-standard STD 66 (RFC 3986).

In practice, it works fine when you use “|” as such, but to conform to the standards and drafts, use percent encoding (% encoding, as defined in the URL specifications) for it, writing %7c (case insensitive) instead:

<link rel="stylesheet" type="text/css" href=
"http://fonts.googleapis.com/css?family=Orbitron%7cSpecial+Elite%7cOpen+Sans">
Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
4

Try replacing the pipe | with %7c and see if it will pass and still load the font on the webpage. You may have to do the same thing for the plus sign.

http://www.w3schools.com/tags/ref_urlencode.asp

Grady D
  • 1,889
  • 6
  • 30
  • 61