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 trialVladimir Miletic
6,201 Pointswhat does mean,"Be sure to include sans-serif as a fallback for your font"?
I don't understand what fallback mean?
<!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:400,700,700italic,800' 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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
h1 {
font-family: 'Changa One', sansa-serif;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
2 Answers
eck
43,038 PointsI believe your mistake is that you wrote "sansa-serif" instead of "sans-serif" Also, in case you are not clear, a fallback font is the font that will be used as a backup for your main font if a viewer on your website does not have access to the font for some reason.
In this example, if google fonts went down for some reason, and you link to their "'Changa One'" font, the browser will use a default font, but if you add a fallback, that font will be used instead.
Vladimir Miletic
6,201 PointsThank you so much.
Tyler Jennings
9,271 PointsTyler Jennings
9,271 PointsIf the browser cannot display your selected font ( in this case 'Changa One'), it will use the font you select as a fallback font ('sans-serif'). Also, there is a typo in your h1 font-family rule; 'sansa-serif' should be 'sans-serif'.