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 Customizing Colors and Fonts Add Fonts

Posted by daisy rivas
daisy rivas
1,203 Points

Can anyone help me with the google fonts i did everything right in the index.html and can anyone help me

Can anyone please help me i dont think it is possible if so i dont want to be stuck on this forever again please help

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Indie+Flower' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</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>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Open Sans Condensed', sans-serif;
  font-family: 'Indie Flower', cursive; 
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

3 Answers

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey there! I'm not sure why you have two font-families stated for your h1 in your CSS. Remove the font-family: 'Indie Flower', cursive; and you should be able to pass the second challenge. :)

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

I've just tried it with the two fonts and it passed just fine. Strange! Can't see any errors in the code.

Perhaps just refresh the page and do it again.

Hope it works!

Ede

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hmm, that's really odd! Her code as is would not pass the second challenge task for me. However if you were to reverse the font-families then the code does pass, because the font-family: 'Open Sans Condensed', sans-serif; would then overwrite the font-family: 'Indie Flower', cursive; And a h1 with a font-family sans-serif fallback is what the second task is asking for. Either way there should only be one font-family declared for an element.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Ah OK,

I hadn't got on to task 2. Was that where it wouldn't pass, Daisy?

I passed the first task with the same code as above (before it has asked you to put in the CSS style, in fact). But in the second task that would be incorrect, as you need to use a font with a sans-serif fallback.

So, I second Kristopher, you just need to use Open Sans Condensed for your h1. And remove the other one, as it is redundant here.

All the best,

Ede

daisy rivas
daisy rivas
1,203 Points
daisy rivas
daisy rivas
1,203 Points

yes it was task 2

daisy rivas
daisy rivas
1,203 Points

ede

daisy rivas
daisy rivas
1,203 Points

okay so i passed it but know it is not letting me pass the 3rd task i dont get it it seems like i am doing everything right.

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Firstly, hooray that you got the second task to pass! Now for the third task what did you put? Without completely giving away the answer let's break down what it's asking you to do.

First, it wants you to set the size of your H1 to 1.75em. You've already selected the h1 when you declared a font-family for it. So now within the brackets you want to also set the size. To do that you would use the "font-size" property.

Second, it wants you to set the weight of the H1 to normal. To set a weight you would use "font-weight" property.

h1 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: _________;
  font-weight: _________;
}

Hope this helps!! Keep up the awesome work :)

daisy rivas
daisy rivas
1,203 Points

what am i soposeed to put in the font-weight?

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

I recommend watching the video before the challenge again. It talks specifically about font-weights. As the MDN mentions "The font-weight CSS property specifies the weight or boldness of the font." The values that font-weight can take include

" normal: Normal font weight. Same as 400.

bold: Bold font weight. Same as 700.

lighter: One font weight lighter than the parent element (among the available weights of the font).

bolder: One font weight darker than the parent element (among the available weights of the font).

100, 200, 300, 400, 500, 600, 700, 800, 900 : Numeric font weights for fonts that provide more than just normal and bold."

The task says to set the weight of the H1 to "normal". So normal is the value you want to use for the font-weight property.

h1 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: _________;
  font-weight: normal;
}