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

Anthony Costanza
Anthony Costanza
2,123 Points
Posted by Anthony Costanza
Anthony Costanza
2,123 Points

Help Ugh...

Ive been doing well with this - thus far - but this font stuff is really tripping me up - How do I do this h1 font change? Please help - thanx

index.html 
<!DOCTYPE html>
<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=Changa+One|Open+Sans:400italic,700italic,400,700,800'
          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

Austin Dsilva
Austin Dsilva
2,516 Points

At the very top of your workspace click on main.css tab and insert it just above the h1,h2 selector.

Anthony Costanza
Anthony Costanza
2,123 Points
Anthony Costanza
Anthony Costanza
2,123 Points

Yeah - I just saw that and got through the section - you know your stuff - thank you!!!

Austin Dsilva
Austin Dsilva
2,516 Points
Austin Dsilva
Austin Dsilva
2,516 Points

Hi Anthony,

You are nearly there....only a couple of tweaks. First, remember the purpose of a link element in the head section. You are essentially letting the HTML document know where the stylesheets exists.

Now you have 3 styles sheets for this exercise. The normalize.css - that resets the styles to make life easier and consistent. The google fonts - that link you would have copied across from the google fonts . main.css - The stylesheet you use to customize the look and feel of elements on your stylesheet including the fonts.

So the head section of your HTML code would have the following link in order, 

    <link rel="stylesheet" href="css/normalize.css">

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

    <link rel="stylesheet" href="css/main.css">

  </head>

Nearly there! Now that HTML knows where to look for the stylesheet. Its time to add the styles to your HTML via the main.css (your customisable stylesheet). So you want the h1 to change, well lets make it change in that main.css style sheet by using the properties such as font-family, color, etc. And since you got a font from Google and want to use, its easy as 

h1 {
 font-family: 'Changa One', sans-serif;  /* sans-serif is a fallback here incase Google breaks some day. */ 
}

Good Luck.

Anthony Costanza
Anthony Costanza
2,123 Points
Anthony Costanza
Anthony Costanza
2,123 Points

Thank you - but where does the h1 get put in ?