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 Kiran kuma
Kiran kuma
504 Points

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

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">
    <link href="http://fonts.googleapise.com/css?
                family=Changa+One|Open+San:400italic,700italic,400,700,800' rel='stylesheet' type='text/class'">         
    <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 
/*********************************
GENERAL
**********************************/

#wrapper{
  max-width:940px;
  margin:0 auto;
  Padding:0 5%;
}

a {
  text-decoration: none;
}



/*********************************
HEADING
**********************************/

#logo{
  text-align:center;
  margin:0;
}



/********************************
COLORS
*********************************/

/* site body */
body{
  background-color:#fff;
  color:#999;
}

/* green header */
header{
  background:#6ab47b;
  border-color:#599a68;
}

/* nv background on mobile */
nav{
  background:#599a68;
}

/* logo text */
h1,h2{
  color:#fff;
}

/* links */
a{
  color:#6ab47b;
}

/* nav link */
nav a, nav a:visited{
  color:#fff;
}

/* Selected nav link */
nav a selected, nav a:hover{
 color:#32673f;
}
John Kumar
John Kumar
13,937 Points
John Kumar
John Kumar
13,937 Points

I do not understand your question. I see above in the HTML that you included a google font of different weights and style. Did you have any further questions?

2 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Kiran,

I can see some formatting issues with your Google Fonts link, take a look at the end of the line....

You have some code wrapped in the link to the font, this should be separate as it is with the link to your main.css file below the fonts declaration.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,700i" rel="stylesheet">

If you look closely at your link, you have some single quotes wrapping the double quotes, this is what is throwing things off.

Hope this helps :)

Craig

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

Hi Kiran,

Look at your " and ' quotes within your google fonts link tag. You are interchanging them and that's why it's messed up. I'd recopy the link and paste exactly the way it is from Google Fonts.

You're starting the google link with a " and then ending it with a ', which won't work.

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