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 trialVictor Albarran
4,662 Pointsverifying HTML code
I tried to verify my HTML code with the W3C website but i got some errors, should I be worried about this? here is the message that I receive:
Error Line 7, Column 141: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800 for attribute href on element link: Illegal character in query: not a URL code point.
β¦ne|Open+Sans:400,400italic,700,700italic,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.
Warning Line 27, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
<section>
5 Answers
Marcus Parsons
15,719 PointsHey Victor,
Convert the pipe characters --> | into %7C. This is called URL encoding. So, take, for example, this line where there is a | symbol in between Changa+One and Open+Sans:
<link href=http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
and change it to this:
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
Victor Albarran
4,662 PointsThank you Marcus, that solved the issue.
Marcus Parsons
15,719 PointsYou're welcome, Victor!
israelmaykut
8,730 PointsI had the same problem. This solved the issue for the markup validator however the Changa One font still does not come through in my h1.
Marcus Parsons
15,719 PointsMake sure your selector for the h1 has a string that says "Changa One" for its font i.e.
h1 {
font-family: "Changa One", sans-serif;
}
israelmaykut
8,730 PointsI was using single quotes like the video says. However i changed to double like you show but it still doesn't come through. Otherwise my syntax is the same as you have there.
Marcus Parsons
15,719 PointsIt can be single or double quotes. You should post this as a new question on the forum and post a snapshot of your workspace along with the question: http://www.teamtreehouse.com/forum/workspace-snapshots
israelmaykut
8,730 PointsI have been using Cloud9 instaed of the Workspaces here. I checked out the elements with Chrome and found this error below. So the styles are blocked. Does anyone serve fonts over HTTPS?
Mixed Content: The page at 'https://preview.c9.io/imaykut/treehouse/index.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,700,800,400'. This request has been blocked; the content must be served over HTTPS.
Marcus Parsons
15,719 PointsYou could download the fonts and import them yourself. That will eliminate the cross reference problem.
Phong Pham
8,217 PointsHey Israel, I was having the same problem as you I think and reading your answers prompted me to try modifying the href link from google fonts by adding an 's' after 'http'
so:
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
to:
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
It seems to have done the trick for me and now the font changes as it should...hope this helps!
Marcus Parsons
15,719 PointsMake sure you change your | character to %7C, as well.
Phong Pham
8,217 PointsThank you, Marcus...I had initially changed the piping to %7C after reading your replies and then adding the 's' to http and now it works like a charm.
Marcus Parsons
15,719 PointsAwesome! :)
Schweine FEin
2,671 PointsSchweine FEin
2,671 Pointsperhaps someone should contact the google fonts api team so they correct the url's that are given to the users...
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI've sent out word to them about this.
Schweine FEin
2,671 PointsSchweine FEin
2,671 Pointsgreat! thanks for that :)
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsYou're welcome, Luca!