Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,560 Points
Hannah Gaskins
Hannah Gaskins
14,560 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!