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

Question

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;
}

Answer 1 · 2018-04-06T09:25:36Z

April 6, 2018 9:25am

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.

Answer 2 · 2018-04-06T10:46:48Z

April 6, 2018 10:46am

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

Answer 3 · 2018-04-07T02:25:24Z

April 7, 2018 2:25am

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/

Welcome to the Treehouse Community

Looking to learn something new?

Sorcha Ryan

Sorcha Ryan

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

3 Answers

Damien Watson

Damien Watson

Sorcha Ryan

Sorcha Ryan

Damien Watson

Damien Watson

Damien Watson

Damien Watson

Marc Rubin

Marc Rubin

Damien Watson

Damien Watson