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

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

Posted by wdgbmakhef
wdgbmakhef
712 Points

Choose a font from Google Fonts and include it into the page. This should be suitable for a headline element.

i can't understand this one, coz i applied more than 5 time deffetant font-family but can not solve this question, kindly 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 class="header">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;
  font-family: inherit;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

9 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi,

Go to google fonts, select the font you want and add it to your collection. Then, choose the standard way to import it ( link href ) and paste the code before your main.css rule. Since this rule needs the font. :)

Try this head in your code:

<head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>

Elian

wdgbmakhef
wdgbmakhef
712 Points

thank you dear, i thought i just have to change by font name like font-family.

elk6
elk6
22,916 Points

No problem. :) Happy to help.

By the way, not just for me, but if you get a nice answer on here, it's common to select a "best answer". Since people get extra credit for that. :)

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

oh! yeah, understood. good job dear, and one more thing i saw your profile almost you have learnt everything without java programing. i would like to continue to get help from you always. if possible then plz let me know the other way to talk with you.

elk6
elk6
22,916 Points

You can tag me in messages to ask for my help. Write my name with an @ in front of it and i will get a message. :)

But, to be fair, there are a lot of skilled people here. And a lot that are more skilled than me as well. ;)

Always happy to help though.

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

ohhh! really ? then always i will chose you like best answer.. hahahah

elk6
elk6
22,916 Points

Haha, thank you. ;)

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

if you don't mind then also i need more help, actually i am new user and don't know much, still i can't am confused how to add google font in my collection, because don't know where it is located. hehehe

elk6
elk6
22,916 Points

Sure, always here to help.

The first thing you do is go to the Google Fonts site. It's located here:

https://www.google.com/fonts Then you search for a font you want and press the blue "add to collection" button. After that, you've got your selecte font ready on the bottom of the page. Select "use" and you will be taken to the next page.

Seklect additional weights in step 1, choose another character set if needed in step 2 and here comes the important part.

In step 3, you can choose different options for importing:

Standard is HTML. It's like i described above. You get a link which you need to include in the head of your html, before your own stylesheet, since that uses the fonts. It needs to know where to find it. Fonts always go before your own sheets.

Second is CSS, you can add an @import rule to your CSS sheet. You learn more about this in a later course.

3rd option is to import the font with JavaScript. I would leave that one alone if i were you. No real benefits, especially not if you don't know your way with Javascript.

Now, the last thing you need to do is step 4, selecting the font where you want it.

Let's say you have a div named "myDiv" and you want the H1 in there to have your font (Roboto, in this case), you use the css font-family to do that, like this:

HTML

<div id="myDiv">
<h1>Some headline text...</h1>
<p>Some pragraph</p>
</div>

CSS

#myDiv h1 {
font-family: 'Roboto', sans-serif;
}

The sans-serif after the Roboto is a fallback font. If, for some reason, the Roboto font cannot load, the users will get the standard sans-serif font.

Hope this explains it a bit. :)

Edit: Here is the link to Google Fonts again. We have some troubles with links at the moment. Something gets added after them sometimes. THis one should work:

https://www.google.com/fonts#

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

h1 { font-family: 'robot', sans-serif; font-size, 1.75em; font-weight: normal; }

it doesn't work to change the font-size,

elk6
elk6
22,916 Points

Which challenge are you?

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

sorry dear i got answer coz i wrote just single colon instead of semi colon

thank you

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

hello, dear need your help, are you there ?

elk6
elk6
22,916 Points

Where do you need help with?

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

how do i send index.html when i am answering to someone,, as you had sent me when i was asking questions and in example your were sending you html page "work space"

elk6
elk6
22,916 Points

You can take a snapshot of a workspace by pressing the eye button in the top right corner. You are only allowed to do this 5 times though. It's better to copy/paste your code into the answer or comment. We have a markdown cheatsheet on how to make the code appear like code. The best way to do it is to use 3 backticks followed by the language you are using. So for HTML it would be 3 backticks followed by "html".

Paste your code and close again with 3 backticks.

In case you don't know what a backtick is, here's one: `

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

ok, thank you