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 How to Make a Website Customizing Colors and Fonts Add Fonts

Posted by Tim McKyer
Tim McKyer
10,989 Points

Why will it not let me copy and paste from Google fonts?

Won't let me copy the link url from Google fonts and whenever i try to just type it out it will not let me because the url is too long or for the line help!???

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;
}
Unsubscribed User
Unsubscribed User
5,512 Points

To be clear, it will not let you copy/paste from the Google Fonts site? What browser are you using?

Tim McKyer
Tim McKyer
10,989 Points

Google chrome, and yes it won't let me copy and paste from the Google fonts site. I also tried just typing in the Url but that didn't work for me either.

3 Answers

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Timothy,

I'm not sure why you are running into a problem. But when using a google font you'll need to include something like this in the head tag of your html -

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Open+Sans:400,300,300italic,600,400italic,600italic,800italic,800,700italic,700' rel='stylesheet' type='text/css'>

and then something like this in your css, whenever you want to use that font -

* {
font-family: 'droid sans';
}

Where are you trying to copy the link from? Can you post a link? You shouldn't have to resort to typing it out!

Cheers,

Ede

Tim McKyer
Tim McKyer
10,989 Points

Thanks and I will give it a shot and let you know if it works :)

Tim McKyer
Tim McKyer
10,989 Points
Tim McKyer
Tim McKyer
10,989 Points

It just won't allow me to paste into the text editor but i can copy and paste anywhere else on my computer.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hmm, can you copy things in general into the editor? I'd suggest just trying a different editor and seeing if that's the problem. It's obviously copying fine from google fonts.

Tim McKyer
Tim McKyer
10,989 Points
Tim McKyer
Tim McKyer
10,989 Points

Problem Solved , Thanks for the help I just had to type the link in instead of pasting it lol happy coding :)

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Glad you found a solution. Although typing it out could be a bit frustrating! I'd definitely try another editor for the future.

All the best