How to include a Google Font into web page?

Question

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">
    <link href='http://fonts.googleapis.com/css?family=Princess+Sofia|Stint+Ultra+Expanded' rel='stylesheet' type='text/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

.post-title
{
font-family: 'Euphoria Script';
font-family: 'Kaushan Script';
font-family: 'Shojumaru';
font-family: 'Damion';
}

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

Answer 1 · 2016-02-25T09:44:09Z

February 25, 2016 9:44am

Hey Lee,

about which task of the code challenge are you talking about in particular? I assume it's the first one and if so: For the first task you don't have to change your main.css file yet. You just have to add the font in your HTML file via a link tag you get from google fonts.

You already did that, good job! The only problem why you're not passing the challenge is that you have to include the font before you include the main.css file. The reason behind this is that you want to use this font in the main.css file and therefore you have to include it beforehand.

The order should look like this:

    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Princess+Sofia|Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">

I hope that helps, good luck! :)

Welcome to the Treehouse Community

Looking to learn something new?

Lee Li

Lee Li

How to include a Google Font into web page?

1 Answer

Tobias Helmrich

Tobias Helmrich

Lee Li

Lee Li