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 Add Fonts

Joanna Gumbley
Joanna Gumbley
1,056 Points
Posted by Joanna Gumbley
Joanna Gumbley
1,056 Points

Can't seem to get past Font-family under h1 part.

This code challenge... I can't pass it. I am pretty sure I am doing everything correctly. Need help! I've moved on in the mean time.

Jill Kuznicki
Jill Kuznicki
17,191 Points
Jill Kuznicki
Jill Kuznicki
17,191 Points

So glad I wasn't the only one having problems with this.

3 Answers

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

Here is a step-by-step way do do this quiz:

Go to google.com/fonts and pick a font and click Add to Collection, then click Use and copy and paste the code it gives you right above the <link rel="stylesheet" href="css/main.css"> in your css:

  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>

That should get you past the first task.

Then you need to apply that font to your h1 in your CSS with 'Sans Serif' as a fallback like this:

h1 {
  font-family: 'Your Font', sans-serif;
}

Now the third task, you need to set your font-weight to normal and set you font-size to 1.75em like this:

h1 {
  font-family: 'You Font', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

That should be it!

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Joanna;

It sounds like you are on Task 2 of the Challenge. In Task 1 you had to:

Choose a font from Google Fonts and include it into the page. This should be suitable for a headline element.

That got installed in the <head> element of the HTML document before the normalize.css and main.css links.

For this example I have chosen the font Oswald, so my header looks like this:

  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

Task 2 asks us to:

In your CSS, apply your font to the first level headline using font-family. Include a sans-serif fallback.

So now we switch over to the main.css file in the Challenge. Let's look at what the task is asking.

  1. Apply our font, in this case "Oswald" to the first level headline. That would be h1. It sounds like you got that far already, correct?
  2. Apply the font using the font-family property. So we need to put that inside the h1 selector.
  3. Include a sans-serif fallback, after we assign a value of "Oswald" to our font-family property we also need to include sans-serif.

So the code snipet for Task 2 would be:

h1 {
     font-family: "Oswald", sans-serif;
}

Does that make any sense?

Ken

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Joanna.

Can you please be more specific and tell us which code challenge ?

Also could you please paste in the code you have written so far for the exercise?

ty