What am i doing wrong ?

Question

Not quite sure what's wrong the question says to insert your font into your CSS file with a backup font of sans-serif.

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=Droid+Sans:400,700|Open+Sans:400,300,300italic,600,400italic,600italic,800italic,800,700italic,700' rel='stylesheet' type='text/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;
}

h1{
  font-family: 'Droid sans-serif';
}

Answer 1 · 2015-02-03T21:19:22Z

February 3, 2015 9:19pm

Nearly, separate the fonts like this:

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

Droid is a special web font so needs the apostrophes but not the standard sans-serif.

Answer 2 · 2015-02-03T21:19:41Z

February 3, 2015 9:19pm

hello , just add sans-serif after 'Droid Sans', in case if your server can't have acces to http://googlefonts/......

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

hope this will help

Answer 3 · 2015-02-03T21:17:32Z

February 3, 2015 9:17pm

Your so close! after the font you chose put a comma in between your font and sans-serif. you should be good to go.

Answer 4 · 2015-02-03T21:20:59Z

February 3, 2015 9:20pm

Hi Timothy,

It sounds like you need to set your desired font, and then another font if that fails, like so -

font-family: 'Droid sans-serif', sans-serif;

The first in the list will take priority, then you can add as many as you like after that, a 'font-stack'.

Hope that helps,

Ede

Welcome to the Treehouse Community

Looking to learn something new?

Tim McKyer

Tim McKyer

What am i doing wrong ?

4 Answers

James Alker

James Alker

jeremie singler

jeremie singler

Jacob Mishkin

Jacob Mishkin

edeharrison

edeharrison