how do i choose a font from google fonts

Question

how do I choose a font from google fonts

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

Answer 1 · 2017-07-18T05:53:24Z

July 18, 2017 5:53am

Go to fonts.google.com
Click the plus (+) sign next to a font.
Click to reveal that pop-up box on the bottom of the page.
Under where it says "Standard," select and copy that line of code that starts with <link rel="stylesheet"...
Paste that code snippet into the <head> of your document, before your own stylesheet.
In your main.css file, set some selector to use that font, for example:

body {
  font-family:  'Roboto', sans-serif;
}

Replace 'Roboto' with whatever the name of the font you chose; Google gives you an example in that same pop-up where the code snippet is. Should work.

Answer 2 · 2017-07-18T05:56:57Z

July 18, 2017 5:56am

Hiya Tarek! There are a couple of ways to add google fonts to your web page:

The first way is to copy link that google fonts provide ya after completing your "font family"(it mostly take two font groups to make a font family). Copy the link and squeeze it the "src" tag in your <link> tag in your header. For this step, you need internet for your fonts to kick in.
The other way is to download all the fonts to your local machine. And link it in your head tags. This step dont require any internet.

I suggest you head over google fonts. I hope it helped! (:

Welcome to the Treehouse Community

Looking to learn something new?

Tarek Salha

Tarek Salha

how do i choose a font from google fonts

2 Answers

Eric Butler

Eric Butler

Ari Misha

Ari Misha