Adding Google fonts, do I add it in CSS page or HTML text page?

Question

I got stuck in the coding... isn't this what the video lesson taught us? Why wouldn't the challenge question get through when asked to add a Google font into it.

h1, h2 { color: #fff; font-family: 'Changa One', 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 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;
}

nav a {
  color: #fff;
}

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

Answer 1 · 2015-01-21T16:28:04Z

January 21, 2015 4:28pm

I think it first wanted you to add the font link under the normalize.css

Then it will ask you to add the font to the main.css

I got confused too but that's the reason it opens the index.html and why it is there for the first step question.

Answer 2 · 2015-01-21T13:37:53Z

January 21, 2015 1:37pm

it looks like they are asking you to go to Google fonts http://www.google.com/fonts# and choose a font that would be good for an h1 and h2 tags. From your questions it looks like you choose 'Changa One'. so what you need to do is go to Google fonts and choose the font you want, then add the <link> from Google fonts to your <head> in the html. this will link the font to your html. to style with the font you just need to do what you already have styled for your h1 and h2 tags. I hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

Jason Zeall

Jason Zeall

Adding Google fonts, do I add it in CSS page or HTML text page?

2 Answers

Saif Khan

Saif Khan

Jacob Mishkin

Jacob Mishkin