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!

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

CSS

Kyle Biancardi
Kyle Biancardi
1,674 Points
Posted by Kyle Biancardi
Kyle Biancardi
1,674 Points

The third party font from google fonts for some reason isn't changing my text!

I am currently on importing third party fonts and I chose to use google fonts. I have done all of the steps and still for some reason my font on the preview isn't changing. Please help and thank you in advance!

here is my code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kyle Biancardi | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css? family=Poiret+One|Syncopate:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logos"> <h1>Kyle Biancardi</h1> <h2>Designer</h2> </a> <div id="list"> <nav> <ul> <li><a href="index.html"class="selected">Portfolio</a></li> <li><a href="about.html">About Me</a></li> <li><a href="contact.html">Contact Me!</a></li> </ul>
</nav> </div> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Learning texture and Colors</p> </a> </li> <li> <a href:"img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with Drips</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying 80's Glow!</p> </a> </li> </ul>
</section>
<footer> <a href="http://www.facebook.com" alt="facebook logo"> <img src="img/facebook-wrap.png"> </a> <a href="http://www.twitter.com" alt="twitter logo"> <img src="img/twitter-wrap.png"> </a> <p>Ā© 2014 Kyle Biancardi</p> </footer> </div> </body> </html>

/******************************
 General Basic Design CSS Page
******************************/


a {
 text-decoration: none;
}


/**************************
Page Content imgs, captions
**************************/


#wrapper{
  max-width: 940px;
  margin:0 auto;
  text-align:center;
  padding:0 5%; 
}


/******************
     Logos
******************/


#logos{
  text-align: center;
  margin:0;
}


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


header{
  background:#990000;
}


h1,h2, h1:visited{
 color:#fff; 
} 


/******************
 Navigation links
******************/


#list{
   text-align: center;  
 }


#list{
  background:#cccccc;
}


#list a, list a:visited{
 color:#fff;
}


#list a.selected{
color:#cc0000;
} 


#list a:hover{
color:#cc0000;  
}
/******************
    Body
******************/


body{
  background:#fff;
}


footer{
color:#fff;
}

2 Answers

Hannah Gaskins
Hannah Gaskins
14,572 Points
Hannah Gaskins
Hannah Gaskins
14,572 Points

Hey Kyle,

It looks like there is a huge space within the google font link. You'll want the 'family' to be right up next to the 'css?' portion of that code. So here is what this looks like without that spacing:

html

<link href='http://fonts.googleapis.com/css?family=Poiret+One|Syncopate:700' rel='stylesheet' type='text/css'>

Hope this helps!

Cheers :)

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You have a large gap in your link to the google font. That may be the issue. Also, you only use quotations around the font name when there is a space in the name. I am not sure if there is an error when you add quotes that are not necessary, but it may.

Also, when using markdown to format your quote, use three back ticks and the language with no space. Then begin your quote on the next line. End the quote with tick marks on a new line. I have also found that I have to double space between text and the tick marks.

Kyle Biancardi
Kyle Biancardi
1,674 Points
Kyle Biancardi
Kyle Biancardi
1,674 Points

Thanks for the help with the markdowns i was getting frustrated! i couldn't figure out what i was missing.

Thanks!