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 jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

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

jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

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

jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

the link is broken sorry

Marisa Hendrickson
Marisa Hendrickson
8,303 Points
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.

jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

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

Sam Baines
Sam Baines
4,315 Points
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: .

jude Agwuh
PLUS
jude Agwuh
Courses Plus Student 542 Points
jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

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>>> :)

jude Agwuh
PLUS
jude Agwuh
Courses Plus Student 542 Points
jude Agwuh
jude Agwuh
Courses Plus Student 542 Points

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