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 Anthony Conti
Anthony Conti
Courses Plus Student 2,213 Points

What is wrong with my Google font code?

I went to validate my HTML code, and it says I'm having an error with my font code I used from Google Fonts. Mine is exactly the same as shown in the tutorials I don't understand what's wrong with it.

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

This is what is giving me the error for this:

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

3 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi,

In your code replace the pipe ( | ) symbol after 'Changa+One' with %7C, for example:

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

would become:

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

-Rich

Anthony Conti
PLUS
Anthony Conti
Courses Plus Student 2,213 Points
Anthony Conti
Anthony Conti
Courses Plus Student 2,213 Points

Yes! That worked. Thanks Rich, you're the best. Why was it doing that?

Rich Bagley
Rich Bagley
25,869 Points

No problem, glad you managed to fix it. The character set doesn't accept the pipe character and so you need to URL encode it for it to be allowed.

Hope that helps! Don't forget to mark it as the Best Answer if you're sorted :)

-Rich

Sean Kelley
Sean Kelley
7,118 Points
Sean Kelley
Sean Kelley
7,118 Points

Had the same issue, thanks for this