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

Micole Noddle
Micole Noddle
5,797 Points

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

Micole Noddle
Micole Noddle
5,797 Points

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

Micole Noddle
Micole Noddle
5,797 Points

Thank you so much, Dustin!

Ariel Aronica
Ariel Aronica
6,646 Points

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.

Micole Noddle
Micole Noddle
5,797 Points

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

Ariel Aronica
Ariel Aronica
6,646 Points

I would say yes for optimization of running a website.

Ian Hattendorf
Ian Hattendorf
7,715 Points

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.

Micole Noddle
Micole Noddle
5,797 Points

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

Ian Hattendorf
Ian Hattendorf
7,715 Points

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

Ariel Aronica
Ariel Aronica
6,646 Points

No problem. Good luck! :)