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

CSS How to Make a Website Responsive Web Design and Testing Website Testing

W3C 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.

Hi Micole,

Can you post the error you received please?

Thanks

-Rich

Here'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

Hi 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

Thank you so much, Dustin!

I 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.

Is it necessary to do this for optimization of running our websites or just so it passes the WC3 validation?

I would say yes for optimization of running a website.

The 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.

Is it necessary to do this for optimization of running our websites or just so it passes the WC3 validation?

It should work fine in practice, however you should aim for standards compliance if possible.

Thanks, guys!

No problem. Good luck! :)