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

Kevin Mach
Kevin Mach
4,489 Points
Posted by Kevin Mach
Kevin Mach
4,489 Points

What am I doing wrong here. Was asked to put sans-serif as a fall back font.

Here is my CSS

h1 { font-family: 'Baloo Bhai', cursive, sans-serif; }

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=Baloo+Bhai" 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{
  font-family: 'Baloo Bhai', cursive, Sans-serif;
  color: #fff;
}

h1 {
    font-family: 'Baloo Bhai', cursive, Sans-serif;
}

nav a {
  color: #fff;
}

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

3 Answers

Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points
Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points

i think you need to remove cursive and have it like this?

h1 {
    font-family: 'Baloo Bhai', Sans-serif;
}
Kevin Mach
Kevin Mach
4,489 Points
Kevin Mach
Kevin Mach
4,489 Points

yup tried that too. copied and pasted your code into the exercise and it still wont budge. any other ideas? I have also tried using another font too.

Tanja Schmidt
Tanja Schmidt
11,798 Points
Tanja Schmidt
Tanja Schmidt
11,798 Points

You added the font-family not only to your h1 but also to your h2 - remove it entirely from your "h1, h2" selectors and only keep it in your extra h1 selector. Also, as Andreas pointed out, remove cursive and write sans-serif all in lower case - and you should be good to go. :)

Kevin Mach
Kevin Mach
4,489 Points
Kevin Mach
Kevin Mach
4,489 Points

Thank you for the reply but I forgot to mention that I did try all of the things you mentioned. Nothing seems to work. I separated the h1 tags, removed the cursive and even tried using a different font. Not sure what is going on. I tried this piece of code in my atom text editor and everything works fine.

Tanja Schmidt
Tanja Schmidt
11,798 Points
Tanja Schmidt
Tanja Schmidt
11,798 Points

I went through the challenge with your font and it worked just fine! I had no bummer whatsoever. ;-) But what do you mean by "seperated the h1 tags" ? You leave the rest of the code as it was and only add your h1-styling with a new selector:

h1, h2 {
  color: #fff;
}

h1 {
font-family: 'Baloo Bhai', sans-serif;
}

The h1, h2 is from the code that was already there, the second h1 is what you add yourself to pass the task.

Kevin Mach
Kevin Mach
4,489 Points
Kevin Mach
Kevin Mach
4,489 Points

I know what I meant to say was after posting this I went ahead and tried different things. Including separating the h1 and h2 tags. I think there might be an issue with my browser?? I just copied your code into my code challenge and it still doesn't work. I am going to try to reset my browser cache. I am using Google Chrome

Tanja Schmidt
Tanja Schmidt
11,798 Points
Tanja Schmidt
Tanja Schmidt
11,798 Points

Oh, okay, sorry to hear that. I'm using Chrome too, but it seems like some students were having issues with it lately. Maybe you could also try to restart your challenge code, if you haven't already done that? Who knows, maybe some tiny thing got mixed up, while you where trying to fix the issue. Hope, you can figure it out soon. Good luck!