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 andre Howard
andre Howard
8,224 Points

how to set h1 font family

h1 { font-family: 'Changa one', sans-seriff; }

Im not understanding where is should be placed

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   <link href='http://fonts.googleapis.com css?family=Open+Sans|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  </head>
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.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;
}

h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}
h1 {h1 {font-family:'changa one; sans-serif;}

3 Answers

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points
Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Putting it in your main.css like you did is correct. You just seem to have some typos in that part of your code.

Try

h1 {
  font-family: 'Changa One', sans-serif;
}
chetanluthra
PLUS
chetanluthra
Courses Plus Student 506 Points
chetanluthra
chetanluthra
Courses Plus Student 506 Points

You've selected the h1 element twice and also did some typing mistakes. Try the rule provided by Claudiu in above answer. And things will work great.

Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points
Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points

You are very close Andre, you typed h1 again after you already selected the element

Your code:

h1 {h1 {font-family:'changa one; sans-serif;}

If you delete the second h1 and open curly brace that needs to change first. Secondly in the rule there should be a comma after 'Changa One' as the sans serif is an alternative font in case Changa One can't be loaded by the browser. After that it should look like this 

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

That should all you need to fix it