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

Muhammad Nauman
Muhammad Nauman
6,940 Points
Posted by Muhammad Nauman
Muhammad Nauman
6,940 Points

how do i add the font family to css

cant seem to add the open sans to the h1 selector

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" rel="stylesheet">
    <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, h2 {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}
tedc
tedc
3,320 Points

Hi Muhammad,

This is an understandably confusing error, as what you can done is actually correct and would work fine on a browser. It is just the exact parameters of the challenge are to apply this property to the CSS selector h1 alone and not alongside h2 as you have done. Try putting the font family on only h1 as a separate selector and this should work fine :)

2 Answers

christian lian huat toh
christian lian huat toh
7,213 Points
christian lian huat toh
christian lian huat toh
7,213 Points

The challenge said that you should apply it to the h1 but in your css you applied it to both h1 and h2 you should create a new rule with only h1 tag on it and then apply the font-family like this:

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

tedc
tedc
3,320 Points

hahaha Christian, beating me to every answer while I try to be thorough :P

tedc
tedc
3,320 Points
tedc
tedc
3,320 Points

Hi Muhammad,

For the test to pass, make sure you only have the font family as written in your code under a h1 selector only, and remove it from the combined h1, h2 selector, as this will not pass.

I have attempted the challenge replicating the h1,h2 selector error as you have encountered, and can confirm changing this as Christian and I have suggested should pass the test. Hope this helps :)