Google font <head> code giving validation error

HTML & CSS
1

Hi

I placed the following code

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

in the <head> of http:pintotours.net, which I copied from Google Fonts own page and it is giving me a validation error

Bad value http://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans+Condensed:300 for attribute href on element link: Illegal character in query: not a URL code point.…y=Roboto:400,500,700|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
Syntax of URL:Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.
2

It’s the pipe character ( | ) in the url that needs to be encoded correctly. Remove the pipe and use %7C instead and it should validate.

3

Hi Paul

Ok, it validates now.

i put everything together. It works but I hope it is correct:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans+Condensed:300' rel='stylesheet' type='text/css'>

Many thanks

4

It works and it validates. What more could you ask :smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.