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

CSS How to Make a Website Customizing Colors and Fonts Add Fonts

Posted by MUZ140045 Tafadzwa Gumunyu
MUZ140045 Tafadzwa Gumunyu
13,202 Points

stage 5 challenge 1

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

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    family=changa+one|open+sans:400 italic,700 italic,400,700,800'
    <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;
}

2 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

To use a font from Google, you need to go to Google Fonts (http://www.google.com/fonts) and then select the font of your choice, then add it to your collection and use the final lines of code proposed in your project.

You'd then add a Google style sheet link in your HTML document's head section, and a CSS font declaration (given by Google) in your own style sheet. It's quite easy.

To learn how to do that, watch this great Treehouse lesson: http://teamtreehouse.com/library/how-to-make-a-website/customizing-colors-and-fonts/pick-fonts-and-set-relative-units

Hope this helps!

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Also, why does your document have this after your normalize.css link in your HTML's head section?

family=changa+one|open+sans:400 italic,700 italic,400,700,800'

This can't lie anywhere in your document on its own. From what I see, you chose the Changa One and Open Sans fonts from Google, and a few text-transforming options (italic and bold). This is how you'd need to add it to your HTML document:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

So in your HTML document, it'd be like this:

    <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">

Then, you'd add the font names to your CSS styles like this (but, of course, don't forget your selectors):

font-family: 'Changa One', cursive;
font-family: 'Open Sans', sans-serif;