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 Resize Text

I tried to add link to font as shown but my test view does not show the changes. I am using a chrome browser to view it.

my code matches that which I see on the video. What am I missing?

Can you paste your code?

Here's my index;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Joey Leite | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800' type='text/css'> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Open+Sans:400italic,600italic,700italic,800italic,400,800,700,600' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Joey Leite</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 80s 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="https://twitter.com/Leite_Joey"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com/joey.leite.9"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Joey Leite.</p> </footer> </div> </body> </html>

Here's my main.css;

/************************************** GENERAL **************************************/

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

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Dosis', sans-serif; margin: 15pz 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************************** Navigation **************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/************************************** Colors **************************************/

/site body/ body { background-color: #fff; color: #999; }

/* Green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* Links */ a { color: #6ab47b; }

/* Color for Nav link */ nav a, nav a:visited { color: #fff; }

/* Selected Class link color */ nav a.selected, nav a:hover { color: #32673f; }

using Chrome browser to view. I must obviously be missing something I just don't see it.

17 Answers

Font families rely on fonts installed on the local computer. There appears to be a way around that, but it has not been covered yet. See:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family?redirectlocale=en-US&redirectslug=CSS%2Ffont-family

I am not sure a font linked in the html counts as a font on the computer. I have had success calling fonts directly.

Ah, that makes sense. I'm going to go and grab as many fonts as I can and install them on my computer before continuing on

Thanks

In the comments of another thread this should have worked. If you could post the CSS as shown in the Markdown Cheatsheet, it would be helpful.

I have both My index and my main.css listed above, of course the font is wacky

add three marks on the line before your code and the line after your code. It also suggests the language after the first three marks.

I'm a novice, what marks are you describing?

Look at the Markdown Cheatsheet linked just under the add answer box. The marks did not appear in my post.

Like this?

'''h1 { font-family: 'Dosis', sans-serif; margin: 15pz 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }'''

'''h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }'''

h1 { font-family: 'Dosis', sans-serif; margin: 15pz 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

No. You did the same thing I did at first. The back tick mark is the upper left key on most Windows keyboards, not the apostrophe.

ya I figured it our, see line right below that

See how your html is formatted at the top of the post? It should look like that. Here is an example:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title><?php echo $pageTitle; ?></title>
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>css/normalize.css" type="text/css">
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>css/style.css" type="text/css">
    <?php 

        // <link href='http://fonts.googleapis.com/css?family=Open+Sans|Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'> 

    ?>
    <link rel="shortcut icon" href="<?php echo BASE_URL . "img/"; ?>favicon.ico">
</head>
<body>

    <div class="header">
        <div class="wrapper">
            <h1 class="branding-title"><a href="<?php echo BASE_URL; ?>">Mrs. Sumner's Creative Classroom</a></h1>

            <ul class="nav">
                <?php   
                    /* list items with a class of "on" indicate the current section; those links 
                    *  are underlined in the CSS to communicate that back to the site visitor;
                    *  the $section variable is set in each individual file 
                    */
                ?>
                <li class="contact <?php if ($section == "contact") { echo "on"; } ?>"><a href="<?php echo BASE_URL; ?>contact/">Contact</a></li>
                <li class="news <?php if ($section == "news") { echo "on"; } ?>"><a href="<?php echo BASE_URL; ?>news/">News</a></li>
                <li class="about <?php if ($section == "about") { echo "on"; } ?>"><a href="<?php echo BASE_URL; ?>about/">About</a></li>
                <?php //Add more navigation links here ?>

            </ul>
        </div>
    </div>

    <div id="content">

So, put three tick marks and code type. On the next line paste your code. Then on the line after your pasted code, three more ticks.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Joey Leite | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800' type='text/css'>
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Open+Sans:400italic,600italic,700italic,800italic,400,800,700,600' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Joey Leite</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 80s 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="https://twitter.com/Leite_Joey"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="https://www.facebook.com/joey.leite.9"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Joey Leite.</p>
       </footer>
      </div>
    </body>
</html>
main.css
/**************************************
GENERAL
**************************************/

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


#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}


a {
  text-decoration: none;
}




#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Dosis', sans-serif;
  margin: 15pz 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/**************************************
Navigation
**************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

/**************************************
Colors
**************************************/



/*site body*/
body {
  background-color: #fff;
  color: #999;
}

/* Green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* Links */
a {
  color: #6ab47b;
}

/* Color for Nav link */
nav a, nav a:visited {
  color: #fff;
}

/* Selected Class link color */
nav a.selected, nav a:hover {
  color: #32673f;
}

First above is HTML and Second is CSS

Make sure your css folder is in the same location as your html file. If not, your relative links are wrong. You do not need quotes around Dosis, but I doubt that would break it. You only put quotes around names with spaces.

Did you put CSS next to the ticks before the quote? It looks like your CSS file is commented out, but I don't see why.

It is also possible that calling the same font twice in your html could cause a problem, but that seems unlikely.

Dosis is only on the h1 element, which is just your name. Open Sans is on the rest.

The only other thing I can think of is checking the link to Google.

I had to take a couple days away from the code to clear my mind, and when I returned I noticed the following misspelling in my css code. I also listed the font twice on my index file. Which explains why the font size didn't work;

margin: 15pz 0;

I should have put down 15px instead of p"z".

Once I removed the duplicate font reference in the index file, the changed the z to an x. The font worked like it was supposed to. I appreciate everyone's help. You guys are awesome :)