Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by junaid shafiq
junaid shafiq
1,361 Points

Google font link not validating

<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

while trying to validate the index.html I get this error

Error Line 7, Column 142: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800 for attribute href on element link: Illegal character in query: not a URL code point.

2 Answers

Matt Chambers
Matt Chambers
1,346 Points

I believe that this may be caused by the pipeline (|) symbol in the Google font API URL. Just taking a guess, not 100% sure though.

Edit: After a quick Google search, this is the case. There is a solution to this over here.

If you want this document validated, then encode that character by the corresponding UTF-8 character, which is %7C. I hope this helps you :)

junaid shafiq
junaid shafiq
1,361 Points

thanks Matt just replaced (|) symbol with %7C and it worked.

Matt Chambers
Matt Chambers
1,346 Points

No problem, glad I could help you buddy!

Alexey Tseitlin
Alexey Tseitlin
5,866 Points
Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Can you please submit the header HTML code?

junaid shafiq
junaid shafiq
1,361 Points

<head> <meta charset="utf-8"> <title>Junaid Shafiq | Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

not sure why you need the header code..

<header> <a href="index.html" id="logo"> <h1>Junaid shafiq</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header