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

CSS

Posted by Christina Pruitt
Christina Pruitt
3,000 Points

Can't import font into my site

I'm using Google Fonts and I can't seem to import the font. What am I doing wrong?

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
  <title>Summer in Seattle</title>
  </head>
  <body>
     <header id="top" class="main-header">
       <h1 class="title">Summer in Seattle</h1>
     </header>
   <div class="main-content"> 
    <p> Seattle, Washington is a different world during the months of June through the end of September. During the summer months, it's like an entire different world, straight out of a teen summer movie.</p>
    <a href="#more">Find out more</a>
     </div>
    <div class="secondary-content group"> 
    <div class="event">
     <h3>Summer Events</h3>
     <p><img src="img/kerrypark.jpg" alt="Seattle Skyline"></p>
     <p>There are numerous events that take place in different neighborhoods throughout the city. Here are a couple that happen during each month.</p>
    <ul>
      <li><a href="#Solstice_Festival">Solstice Festival</a></li>
      <li><a href="#Pride">Pride Parade</a></li>
      <li><a href="#Sea_Fair">Sea Fair</a></li>
      <li><a href="#Night_Market">International District Night Market</a></li>
    </ul>     
   </div>
     <div class="places">
     <h3>Things to Do</h3>
       <p><img src="img/Postcard.jpg" alt="Seattle Waterfront"></p>
    <p>When there isn't an event happening, you can visit one of the many hot spots locals frequent.</p>
    <ul>
      <li> Pike Place Market</li>
        <li>Kayak on Lake Washington</li>
          <li>Bike on Burke-Gilman Trail</li>
            <li>Washington Arboretum</li>
    </ul>
    <ul>
      <li>Bon fire at Golden Gardens Park</li>
        <li>Seattle Aquarium</li>
          <li>Woodland Park Zoo</li>
          <li><a href="#Theos"><span style="color:white">Secret Chocolate Factory!</span></a></li>
    </ul>
     </div>
      </div>
        <footer>
      <p>&copy; 2015 Designed by Christina Pruitt.</p>
      <a href="#top">Back to top &raquo;</a>
    </footer>
  </body>
</html>

/* Base Styles -----------------------*/

body {
  color: #FFF
  margin: 0;
  font: Helvetica, Arial, sans-serif;
}

a:link {
  text-decoration: none;
  color: #0099FF;
}

li {
  list-style-type: none;
}

h1 {  
  font-family: 'Chango', sans-serif;
  font: center;
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  margin: 12px 0 0;
  align-content:center;
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 50%;
  margin-bottom: 20px;
  border-radius: 10px;
}

/* Main Styles ----------------------- */

.main-header {
  height: 700px;
  padding-top: 170px;
  background: linear-gradient(#0099FF, transparent 75%),
              linear-gradient(0deg, #fff, transparent),
              #0099FF url('../img/Sea_Aquarium.jpg') no-repeat center;

  background-size: cover;
  margin-bottom: 100px;
}

.main-content {  
  background-color: #434a52;
  color: #FFF;
  padding: 5% 10%;
  margin: 105px 0 60px;
  border-top: #0099FF 10px solid;
}

.secondary-content {
  border-top: 50px;
  border-bottom: 50px;
  border-color: #0099FF; 
}

.title {
  color: white;
  align-content: center;
}


.event,
.places {
  width: 46.5%;
}

.places {
  float: right;
}

.event {
  float: left;
}

.main-content,
.secondary-content {
  width: 60%;
  margin: auto;
}

/* Float Clearfix ---------------------- */

.group:after {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries ---------------------
@media (max-width: 760px) {
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
  }
  .main-header {
  max-height: 380px;
  padding: 50px 25px 0;
  }
  .title {
    font-size: 1.3rem;
    border: none;
  }
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
*/
Greg Kaleka
Greg Kaleka
39,021 Points

FYI, I cleaned up your formatting a bit - be sure to leave a space before and after your ``` lines (unless it's on the very first line, which is fine). Like this:

```HTML

[html code here]

```

```CSS

[css code here]

```

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Christina,

I just dumped your code into this codepen, and it's importing the font just fine. Does your page look different than the pen above?

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

It wasn't last night when I kept refreshing, but now it is. I have one more question: How to I center the text in the header?

Greg Kaleka
Greg Kaleka
39,021 Points

Great, glad you've got it working. Sometimes your browser will cache a certain version of your page. If a change doesn't seem to be going into effect, clearing your recent history can fix the caching problem.

To center text, all you have to do is add text-align: center; to your .main-header rules.