h1 { font-family: 'Changa One','Sans-serif; } where is the error?

Question

it keeps saying bummer

index.html

<!DOCTYPE html>
<html>
  <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=Changa+One' 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: 'Changa One','Sans-serif;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

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

Answer 1 · 2015-07-11T11:52:05Z

July 11, 2015 11:52am

Hi,

Ron is correct about your missing quotation mark. However if you are referencing a web safe font you dont need to use quotes at all, they are just used to define a font you are referencing away from the user agent (browser).

I personally would use the web safe font cursive as a fallback as it is more like the external font, your css could look like this:

h1 {
  font-family: 'Changa One', cursive;
}

If your doing some task that requires Sans Serif as the fallback just add it like so:

h1 {
  font-family: 'Changa One', sans-serif;
}

Check out other web safe fonts on the link above and you will see you have to be careful about how you call them, eg: Sans-serif should be sans-serif I hope that helps!

Sam

Answer 2 · 2015-07-11T14:07:50Z

July 11, 2015 2:07pm

Sam and Ron are correct, although you do not need quotes on any font name that is one word. sans-serif is one word because of the hyphen so does not need quotes.

You opened and did not close the quote around sans-serif. Putting it in quotes should not be a problem if done completely.

Remember that these languages are case sensitive. You will run into problems if you are not very careful with how you use your capital letters.

Welcome to the Treehouse Community

Looking to learn something new?

MUZ140896 Tadiwa Chokwenda

MUZ140896 Tadiwa Chokwenda

h1 { font-family: 'Changa One','Sans-serif; } where is the error?

Ron Biton

Ron Biton

MUZ140896 Tadiwa Chokwenda

MUZ140896 Tadiwa Chokwenda

2 Answers

Sam Cooper

Sam Cooper

Ted Sumner

Ted Sumner