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

Posted by Joshua Clark
Joshua Clark
759 Points

Invalid Google Font Code?! WAT?!

I go to the W3C website and place my code onto the direct input. But when I hit check, it was invalid and I had an error. What aggravated and confounded me was when I was try to fix it when THIS appeared:

Bad value http://fonts.googleapis.com/css?family=Righteous|Montserrat:700 for attribute href on element link: Illegal character in query: not a URL code point.

WHAT DOES THIS MEAN and how do I fix it?!!

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Google doesn't encode the pipe | character in their urls, which is why the validation is throwing an error. Try encoding it with %7C like this...

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Righteous%7CMontserrat:700">

Edit - To clarify, W3C is flagging the | in your url as being a bad character because it is not encoded. %7C is the encoding for the | character. So whenever you're using google fonts, you'll need to replace each of those pipes with %7C if you want it to validate. The code will work either way, probably.

Joshua Clark
Joshua Clark
759 Points

Okay, thanks. <:)