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
Micole Noddle
5,797 PointsW3C validation doesn't recognize Google fonts anymore?
Went to check the HTML and received an error re:Google fonts. Researched it more and found out that the validator no longer supports Google fonts. Two questions/comments:
1)Will the performance of the website still be OK (the fonts load just fine in the workspace)?
2)Also, if this is the case, it would be nice for the video/coursework to be updated to either warn us this is coming and/or tell us how to make any changes we need to make.
Micole Noddle
5,797 PointsHere's the error:
Line 7, Column 181: Bad value http://fonts.googleapis.com/css?family=Bitter:400,700,400italic|Maven+Pro:400,500|Open+Sans:400italic,700italic,400,700|Changa+One for attribute href on element link: Illegal character in query: not a URL code point. …+Sans:400italic,700italic,400,700|Changa+One' 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.
It's literally written out that way. The Google fonts is written correctly in the HTML (copied directly from Google fonts).
If I take out the Google font link, the error shows this:
Line 7, Column 181: Bad value on element link: Illegal character in query: not a URL code point.
I found a discussion about it on stack overflow from earlier last year, here's a link to that:
http://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org
4 Answers
Dustin Matlock
33,856 PointsHi Micole, there is a somewhat complex answer to character encoding within previous versions of HTML, and what should be encoded in the new specification. Below are some links that may provide a better understanding.
Character Encoding on the Web
Micole Noddle
5,797 PointsThank you so much, Dustin!
Ariel Aronica
6,646 PointsI experienced this same problem. So if you change the " | "s in the code to %7C with no space around it, it should work. For some reason it does not read it otherwise.
Micole Noddle
5,797 PointsIs it necessary to do this for optimization of running our websites or just so it passes the WC3 validation?
Ariel Aronica
6,646 PointsI would say yes for optimization of running a website.
Ian Hattendorf
7,715 PointsThe URL needs to be correctly encoded, the pipe character | must be replaced with its URL encoded value %7C. From the error you gave, your URL would be http://fonts.googleapis.com/css?family=Bitter:400,700,400italic%7CMaven+Pro:400,500%7COpen+Sans:400italic,700italic,400,700%7CChanga+One.
Micole Noddle
5,797 PointsIs it necessary to do this for optimization of running our websites or just so it passes the WC3 validation?
Ian Hattendorf
7,715 PointsIt should work fine in practice, however you should aim for standards compliance if possible.
Micole Noddle
5,797 PointsThanks, guys!
Ariel Aronica
6,646 PointsNo problem. Good luck! :)
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi Micole,
Can you post the error you received please?
Thanks
-Rich