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
Edwin Chau
Courses Plus Student 5,702 PointsAdding font family in first level heading
I tried adding the font family sans-serif fallback to the CSS section (for h1 element) but it didnt go through.
Not sure if I'm doing it right.
<!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|bree|serif' 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{
font-family: 'chango-one' sans-serif-fallback;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
3 Answers
Peter Kullmann
14,267 PointsAs you decided to use the two word font family "changa one", you also have to surround them by quotation marks in your CSS rule. If you choose a single word font-family, you can omit them. This should help you with defining a custom font family.
The fallback however is declared by adding the name of another font family such as "Arial" or the more generic "serif". Appending "-fallback" is not necessary as a font family becomes the fallback solution in case the one declared before it is not supported by the browser or operating system.
Does that make it clearer?
Edwin Chau
Courses Plus Student 5,702 Pointsclear. Thank you!!
Hannah Fulop
7,994 PointsHi Edwin, You don't need to specify that sans-serif is a fallback. In fact I think the browser doesn't know what to do with the word fallback. You can just list the fonts you want in order of importance, separated by commas. So it would just look like h1 {font-family: 'chango-one', sans-serif;}.
I hope that helps!
Edwin Chau
Courses Plus Student 5,702 PointsThank you for your help
Yaser Aljaf
Courses Plus Student 2,221 Pointsyes petter is right when you want to add a font like "Nunito" then add a fall back sans-serif you type: font-family: 'Nunito', sans-serif;
Johnatan Guzman
Courses Plus Student 2,360 PointsJohnatan Guzman
Courses Plus Student 2,360 Pointsh1 { font-family: 'chango-one', sans-serif; }