Choose a font from Google Fonts and include it into the page. This should be suitable for a headline element.

Question

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;
}
{ h1,h2 {font-family: 'Open Sans', sans-serif; }

Answer 1 · 2017-07-25T15:55:26Z

July 25, 2017 3:55pm

Hi Edmore,

Fonts need to be included in the <head> section of the HTML, not in the CSS. Have a quick review of this video on including fonts, specifically starting at 2:10, then give it another go.

If you're still stuck, let us know, but remember to post the new code you are trying. You can see how to post code to the Community by referring to the Markdown Cheatsheet (link just above the Post Answer) button.

:)

Answer 2 · 2017-07-25T15:53:06Z

July 25, 2017 3:53pm

You have to go to Google Fonts to get two bits of code. Simply type Google Fonts in Google and you'll be there. I'm using the Open Sans font.

For Index.html, use this (inside the <head> tag): <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> And the css file (inside the h1, h2 code block): font-family: 'Open Sans', sans-serif;

Code removed due to providing the solution to the code challenge task

Welcome to the Treehouse Community

Looking to learn something new?

Edmore Rwizi

Edmore Rwizi

Choose a font from Google Fonts and include it into the page. This should be suitable for a headline element.

2 Answers

Jason Anders

Jason Anders

Robbie Thomas

Robbie Thomas