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

Brendan Milton
Brendan Milton
9,050 Points
Posted by Brendan Milton
Brendan Milton
9,050 Points

bad value error to do with fonts? Line 7, Column 142:

I cannot figure out why the Wc3 validator is disliking my font code? halp...mae...plaese.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Brendan Milton | Photographer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="CSS/main.css"> <link rel="stylesheet" href="CSS/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Brendan Milton</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="photo/1C0A5607.JPG"> <img src="photo/1C0A5607.JPG" alt=""> <p>Thrift shopping</p> </a> </li> <li> <a href="photo/1C0A5618.JPG"> <img src="photo/1C0A5618.JPG" alt=""> <p>Leave it out</p> </a> </li> <li> <a href="photo/1C0A5754.jpg"> <img src="photo/1C0A5754.jpg" alt=""> <p>Australian country sundial.</p> </a> </li> <li> <a href="photo/1C0A6123.jpg"> <img src="photo/1C0A6123.jpg" alt=""> <p>Im ready for my close up.</p> </a> </li> <li> <a href="photo/1C0A6080.jpg"> <img src="photo/1C0A6080.jpg" alt=""> <p>This is your captain speaking.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/travelingbrendan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/brendan.miltn"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Brendan Milton.</p> </footer> </div> </body> </html>

6 Answers

Kristofer Doman
Kristofer Doman
18,307 Points
Kristofer Doman
Kristofer Doman
18,307 Points

That actually wasn't the problem. It's the pipe delimeter that it doesn't like, which needs to be replaced with "%7c".

So it looks like the following: 

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

I am glad you figured it out, but the issue still lies within the google fonts page itself. The URL they provide for copy and paste, when both 400 and italic 700 are selected (atleast for changa one) builds a URL structure that includes the ascii characters that need to be replaced - if you uncheck 400 and check italic 700, or vice versa, the URL structure is built correctly and passes the validation. I tested this theory, replicated your results, and corrected the issue. I didn't dive as deep to start re-building the structure though.

Kristofer Doman
Kristofer Doman
18,307 Points

Oops, corrected it to read %7c now ☺️. Glad I could help!

Jeffrey Lego
Jeffrey Lego
9,458 Points
Jeffrey Lego
Jeffrey Lego
9,458 Points

On the google fonts page, uncheck normal 400 and check 400 italic (if that is what you want). Paste the link provided into your html and try it again. I think when you have both normal and italic selected the URL structure for copy and paste gets messed up.

Jeffrey Lego
Jeffrey Lego
9,458 Points

FYI, I tested and verified this so it should work for you.

Kristofer Doman
Kristofer Doman
18,307 Points
Kristofer Doman
Kristofer Doman
18,307 Points

I tried doing what you had said, and this didn't work either. Could you just help me correct the markup so it's valid? I'm also getting the same error.

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

Kristofer Doman
Kristofer Doman
18,307 Points
Kristofer Doman
Kristofer Doman
18,307 Points

Here's the line of code.

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

Do you see at the end ,700italic,400,700,800 w3c does not like that. Try to refollow my instruction above using the normal 400 option on the google font page

salvatore saccoccio
PLUS
salvatore saccoccio
Courses Plus Student 591 Points
salvatore saccoccio
salvatore saccoccio
Courses Plus Student 591 Points

yes this does fix the issue. it seems that the font has changed since this video was created apparently the only issue youll run into is that in the main.css code there is a line where the font weight is set to 800 for the header. this isnt a huge deal, but it will make a difference

Brendan Milton
Brendan Milton
9,050 Points
Brendan Milton
Brendan Milton
9,050 Points

Thank you all so much! my code is sorted and verified!