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

Rob Edworthy
Rob Edworthy
950 Points

Error on line 7 column 142

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

I have looked through the questions on the forum, i have tried adding the %7c but still get an error. On another column on the line (144).

I have also changed my code, as per another answer, from the google font site.

any help would be greatly apprecated.

4 Answers

Hey Rob Edworthy,

If you take a closer look at your Googles Font link element you should noticed the href=" ' attribute starts with a double quote and ends with a single quote. Now if you look at the end of the link tag on the type=' " attribute it ends in a double quote, but starts with a single quote. So, because there's a double quote at the very beginning of the href attribute and another one at the very end of the link tag you're actually wrapping all the other attributes within link as the hrefs value. If you start a attribute with a single quote you need to end with a single quote and vise versa for double quotes.

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

Hi Robby,

Thanks for the response, have changed those errors.

I am now getting the following error when i try to validate.

Line 7, Column 143: Bad value http://fonts.googleapis.com/css?family=Changa+One| Open+Sans:400italic,700italic,400,800,700 for attribute href on element link: Illegal character in query: not a URL code point. ā€¦e| Open+Sans:400italic,700italic,400,800,700" 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.

any ideas?

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

Hey Rob Edworthy,

You need to use %7C on the | pipe character in the href attributes value.

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

W3C HTML Validator

Source: http://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org

kabir k
kabir k
Courses Plus Student 18,036 Points

Hi Robby,

Why do we need to use %7C to replace the vertical pipe character ( | ) in the google font?

Rob Edworthy
Rob Edworthy
950 Points

Hey Robby Faller,

I got there, in the end. However I changed the href attribute to copy what was in the w3c checker, but this is different to the link provided by google fonts website.

Is this something you need to play around with when you start testing if the site conforms to the standard?

Hey Rob Edworthy,

Um, I can't really say. I'd assume so... I'm still learning myself, but I don't think many professional developers actually use W3Cs Validators. It's something that's great for beginners to make sure they're writing valid code or missing any brackets, quotes, closing tags, etc. There's a multitude of tools and plugins built into/for text editors that actually run this type error handling / validating for you.

Rob Edworthy
Rob Edworthy
950 Points

No worries, thanks for your help. :-)