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 Isabella Levy
Isabella Levy
3,167 Points

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

I'm not understanding what I'm doing wrong

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>
<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=Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  <head>
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;
}
font-family: 'Changa One', cursive;
font-family: 'Open Sans', sans-serif;
}

5 Answers

Alan Michels
Alan Michels
15,645 Points
Alan Michels
Alan Michels
15,645 Points

It looks like you have <head> at the top and also at the bottom of your file. Try moving the bottom part into the <head> at the top and remove the <head> tag from the bottom.

Lauren Waller
Lauren Waller
10,085 Points
Lauren Waller
Lauren Waller
10,085 Points

Your link to the Google fonts should be up at the top of your HTML document. In your head section

Kevin Razafindrabe
Kevin Razafindrabe
6,484 Points
Kevin Razafindrabe
Kevin Razafindrabe
6,484 Points

Go to google font choose the font you want and then there should be a line of code google gives to link the font into your html by copy-pasting it inside your <head></head> element. For example I chose Roboto. So it should look like this in your 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">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
Kevin Razafindrabe
Kevin Razafindrabe
6,484 Points
Kevin Razafindrabe
Kevin Razafindrabe
6,484 Points

And then you assign the font to the element you want inside your css , in this case it's a headline so you should call the h1 element and give it the font you chose . So it should look as follows in the css :

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

Darren Joy
Darren Joy
19,573 Points
Darren Joy
Darren Joy
19,573 Points

Alan Michels and Kevin Razafindrabe and Lauren Waller all have accurate answers..

So move the links at the bottom in the 'duplicate' head up into the head above the rest of the code and then assign the font to some element as Kevin says... for instance can you see how this at the bottom is missing an element and an opening {?

font-family: 'Changa One', cursive;
font-family: 'Open Sans', sans-serif;
}
Massimo Ceron
Massimo Ceron
22,372 Points
Massimo Ceron
Massimo Ceron
22,372 Points

Copy and paste this link <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans+Condensed:300" rel="stylesheet"> in your <head></head> CSS are ok