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 Customizing Colors and Fonts Pick Fonts and Set Relative Units

Victor Albarran
Victor Albarran
4,662 Points
Posted by Victor Albarran
Victor Albarran
4,662 Points

verifying 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
Marcus Parsons
15,719 Points

Hey 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'>
Schweine FEin
Schweine FEin
2,671 Points

perhaps someone should contact the google fonts api team so they correct the url's that are given to the users...

Marcus Parsons
Marcus Parsons
15,719 Points

I've sent out word to them about this.

Schweine FEin
Schweine FEin
2,671 Points

great! thanks for that :)

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome, Luca!

Victor Albarran
Victor Albarran
4,662 Points
Victor Albarran
Victor Albarran
4,662 Points

Thank you Marcus, that solved the issue.

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome, Victor!

israelmaykut
israelmaykut
8,730 Points
israelmaykut
israelmaykut
8,730 Points

I 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
Marcus Parsons
15,719 Points

Make 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
israelmaykut
8,730 Points
israelmaykut
israelmaykut
8,730 Points

I 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
Marcus Parsons
15,719 Points

It 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
israelmaykut
8,730 Points
israelmaykut
israelmaykut
8,730 Points

I 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
Marcus Parsons
15,719 Points

You could download the fonts and import them yourself. That will eliminate the cross reference problem.

Phong Pham
Phong Pham
8,217 Points
Phong Pham
Phong Pham
8,217 Points

Hey 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
Marcus Parsons
15,719 Points

Make sure you change your | character to %7C, as well.

Phong Pham
Phong Pham
8,217 Points
Phong Pham
Phong Pham
8,217 Points

Thank 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
Marcus Parsons
15,719 Points

Awesome! :)