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 trialBrendan Milton
9,050 Pointsbad 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
18,307 PointsThat 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
9,458 PointsOn 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
9,458 PointsFYI, I tested and verified this so it should work for you.
Kristofer Doman
18,307 PointsI 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
18,307 PointsHere'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
9,458 PointsDo 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
Courses Plus Student 591 Pointsyes 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
9,050 PointsThank you all so much! my code is sorted and verified!
Jeffrey Lego
9,458 PointsJeffrey Lego
9,458 PointsI 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.
Tony Brown
Courses Plus Student 1,678 PointsTony Brown
Courses Plus Student 1,678 PointsRight on with the %7c escape, Kristofer !!
Kristofer Doman
18,307 PointsKristofer Doman
18,307 PointsOops, corrected it to read %7c now ☺️. Glad I could help!