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 How to Make a Website Responsive Web Design and Testing Website Testing

Bryan Noll
Bryan Noll
9,790 Points
Posted by Bryan Noll
Bryan Noll
9,790 Points

W3C validator error with Google Font link

Hi,

I've just begun my first Treehouse Track and run into my first snag.

W3c is saying that the Google Font Standard Code is incorrect even though it was pasted directly from http://google.com/fonts.

Here is the line in error:

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

Here is the error from W3C validator:

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.
…ne|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

My understanding of the error is that this is incorrect:

>

I can see in the tutorial video that Nick's HTML was validated just fine, while mine triggered this error. Is this something new with Google.com/fonts, or am I just missing something?

Thanks for the help!

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Bryan,

You have to url encode the vertical bar |. Replace it with %7C

Bryan Noll
Bryan Noll
9,790 Points
Bryan Noll
Bryan Noll
9,790 Points

Thanks, Jason.

Strange that Google chose to use the vertical bar instead of the url encoded version. This is more of a rhetorical question, but is this a case of W3C saying that it should be a certain way and Google preferring another way?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

This stackoverflow answer has some information about it.

Seems as if google made a bad choice to use that character.

Also, it seems that you probably don't have to fix it but you should if you'd like to conform to the standards.

Not sure why google continues to not encode the character but at least it's an easy fix.

Bryan Noll
Bryan Noll
9,790 Points
Bryan Noll
Bryan Noll
9,790 Points

Thanks again, Jason. It's also a good reminder that I can just Google (search) an error (or parts of it) to find helpful info. I see that I'm not at all alone in this one, especially on Treehouse.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yeah, I think when I searched to find that stackoverflow link again there were 3 or 4 results from this forum. It's coming up regularly in the forums here so no you're not alone.

I feel that it should just be put in the teacher's notes. It mentions that you might get an error but now how to fix it.

Bryan Noll
Bryan Noll
9,790 Points
Bryan Noll
Bryan Noll
9,790 Points

Good point. And it sounds like I should also start reading the teacher's notes.