Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

good day how do i go about adding fonts on this task... i am stuck on it thanks

i just came back to this course but i am stuck.. how do i add a font to my website doing it in best practice.. thanks

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;
}

4 Answers

Sam Baines
Sam Baines
4,315 Points

Hi Jude - add the following line of code between your link in your html head section for normalize.css and main.css:

<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">

Hope this helps.

it worked.... Thanks. but am stucked in another task.. and its about adding the font in main.css the task says i should add a font family open-sans. how do i get that fixed

Sam Baines
Sam Baines
4,315 Points

You need to add the following in your main.css:

h1 {
font-family: 'Open Sans', sans-serif;
}
Marisa Hendrickson
Marisa Hendrickson
8,303 Points

You can also do this inside of your main.css file:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

And then whatever you want to make that particular font (or another font) just do something like this:

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

the link is broken sorry

Marisa Hendrickson
Marisa Hendrickson
8,303 Points

I typed the wrong quotation, that may have been the problem. But that's all you have to put inside of your CSS.

thanks it worked.. now how do i change the font size to 1.75em

Sam Baines
Sam Baines
4,315 Points

Jude I think you should probably go back and watch over the videos in this course once more to make sure you truly understand and start to remember these css properties that you need to use. For this use the property font-size: and the the property font-weight: .

thanks.... am very rusty on this now.. just came back and started the course again... well, i see you guys here are very good at this.. please i will like to be a very good programmer... i want to be like you when i grow up :) please be my Mentor, master and sansai>>> :)

ok i will give it a try now.. hope it works.