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 trialIsabella Levy
3,167 PointsChoose a font from Google Fonts and include it into the page. This should be suitable for a headline element
I'm not understanding what I'm doing wrong
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.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>
<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=Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<head>
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;
}
font-family: 'Changa One', cursive;
font-family: 'Open Sans', sans-serif;
}
5 Answers
Alan Michels
15,645 PointsIt looks like you have <head> at the top and also at the bottom of your file. Try moving the bottom part into the <head> at the top and remove the <head> tag from the bottom.
Lauren Waller
10,085 PointsYour link to the Google fonts should be up at the top of your HTML document. In your head section
Kevin Razafindrabe
6,484 PointsGo to google font choose the font you want and then there should be a line of code google gives to link the font into your html by copy-pasting it inside your <head></head> element. For example I chose Roboto. So it should look like this in your html :
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
Kevin Razafindrabe
6,484 PointsAnd then you assign the font to the element you want inside your css , in this case it's a headline so you should call the h1 element and give it the font you chose . So it should look as follows in the css :
h1 {
font-family: 'Roboto', sans-serif;
}
Darren Joy
19,573 PointsAlan Michels and Kevin Razafindrabe and Lauren Waller all have accurate answers..
So move the links at the bottom in the 'duplicate' head up into the head above the rest of the code and then assign the font to some element as Kevin says... for instance can you see how this at the bottom is missing an element and an opening {
?
font-family: 'Changa One', cursive;
font-family: 'Open Sans', sans-serif;
}
Massimo Ceron
22,372 PointsCopy and paste this link <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans+Condensed:300" rel="stylesheet"> in your <head></head> CSS are ok