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 Naveen Raj Malla
Naveen Raj Malla
Courses Plus Student 1,041 Points

what do you mean by sans-serif fallback???

what do you mean by sans-serif fallback???

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css"><link href='https://fonts.googleapis.com/css?family=Chango|Source+Serif+Pro:400,600|Changa+One|Open+Sans:400,700italic,600italic,700,400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Chango|Source+Serif+Pro:400,600|Changa+One|Open+Sans:400,700italic,600italic,700,400italic' 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:'sans-serif';
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
   font-size:0.75em;
   margin:-5px 0 0;
   font-weight: normal;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

It hasn't been specifically pointed out yet but you don't want to put quotes around sans-serif

With the quotes it means "check for a font that is named sans-serif"

Without the quotes, it's referring to the css keyword sans-serif This means the browser will retrieve the systems default sans-serif font, whatever that may be. This is what the challenge is requesting.

You still have to specify one of your google fonts before that though.

2 Answers

Rasbin Rijal
PLUS
Rasbin Rijal
Courses Plus Student 10,864 Points
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

Naveen Raj Malla Jee,

The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

font-family: "Times New Roman", Georgia, Serif;

There are two types of font family names:

family-name - The name of a font-family, like "times", "courier", "arial", etc. generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Please feel free to ask if you are still not clear about anything. :)

Chase Marchione
Chase Marchione
155,055 Points
Chase Marchione
Chase Marchione
155,055 Points

Hi Naveen,

The idea of using a fallback is so that you can specify another font (or typeface) in the event that a person visiting the page is using a browser that does not support your preferred font. For example:

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

If your user's browser didn't support the Helvetica font for whatever reason, sans-serif is used instead, since it's the next font (or, in this case, typeface) in the list. Sans-serif is a good choice for a fallback since we can be pretty confident that a browser will support it (it is quite non-specific.) In this case, whatever font your browser goes with should bear at least some resemblance to Helvetica, given it is a sans-serif font.

We could certainly provide more than one fallback, but for the sake of this challenge, we only want to specify one.

Hope this helps!