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.

HTML How to Make a Website Customizing Colors and Fonts Add Fonts

Sorcha Ryan
Sorcha Ryan
415 Points

Choose a font from Google Fonts and include it into the page.

I downloaded two fonts from google but it keeps saying I didn't add the google fonts and i have been stuck on this page for two days. I tried everything but it still says I haven't added the fonts. I am clearly missing a step but watched older videos back and couldn't find anything to help me.

index.html
<!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>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css
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;
}
H1  {
Font-family: changa one, sans-serif;
}

3 Answers

Damien Watson
Damien Watson
27,419 Points

Hi, it doesn't look like you have added the links to the fonts in your page.

In Google fonts, when you select a font family a tab appears down the bottom of the screen which when clicked on shows you the font link and how to use it in css.

WIth 'Changa One', the link below which I'd put in my header.

  <link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">

Then use it wherever you like.. I've used it for the h1 and h2, stripped back a basic page for an example.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">
    <style>
      *           { box-sizing:border-box; }
      html        { font-size:10px; }
      body        { margin:0; padding:0; font:1.6rem/1 arial !important; background-color:#F1F1F1 !important; }
      p           { margin:0 0 1rem 0; color:#333; }
      .container  { margin:1rem auto 0; max-width:960px; padding:2rem; background-color:#FFF; }
      h1, h2      { font-family:'Changa One',cursive; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Page Main Heading</h1>
      <h2>Secondary Heading</h2>
      <p>
        Content: Lorem ipsum dolor amet semiotics craft beer fam pickled 3 wolf moon DIY chicharrones vice authentic in hot chicken. Qui poutine commodo pickled. Vegan four loko eu seitan poke wayfarers swag lo-fi kitsch hell of. Jean shorts food truck est lorem fugiat. Commodo selfies minim schlitz taxidermy, tote bag nisi sint art party pariatur lomo dreamcatcher viral. Pug health goth master cleanse, occupy nostrud four loko kickstarter small batch unicorn polaroid squid.
      </p>
      <p>
        Dolor pickled trust fund skateboard cold-pressed. Esse do nisi migas health goth. Adaptogen polaroid enamel pin tempor. Asymmetrical stumptown wolf flannel reprehenderit taiyaki tempor tacos, +1 eiusmod four dollar toast keffiyeh lo-fi health goth. Hot chicken normcore brunch hashtag, pickled tofu et mollit celiac.
      </p>
    </div>
  <body>
</html>

Cheers.

Sorcha Ryan
Sorcha Ryan
415 Points

Hi Damien, thanks for the reply. I used the links that were on the page on google fonts exactly how they were and it keeps giving me the same notice about not adding the fonts to the page

Damien Watson
Damien Watson
27,419 Points

Ah, ok. I assumed you had forgotten the font link as it's not in your example code.

Damien Watson
Damien Watson
27,419 Points

I added the font link from above to your code and the font works as expected using your code?

<link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">

I think you might be missing the @font-face in your CSS file because I don't see any. This is the way to use the Google font you are wanting to use.

Check it out at https://css-tricks.com/snippets/css/using-font-face/

Damien Watson
Damien Watson
27,419 Points

Font-face is not required with a web hosted font like from Google Fonts. Using this is usually if you're hosting your own font created in something like font-squirrel.