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.

Question

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

Answer 1 · 2015-05-07T05:19:22Z

May 7, 2015 5:19am

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.

Answer 2 · 2015-05-07T20:53:19Z

May 7, 2015 8:53pm

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

Answer 3 · 2015-05-07T20:53:35Z

May 7, 2015 8:53pm

Thanks

Answer 4 · 2015-05-07T21:42:04Z

May 7, 2015 9:42pm

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.

Answer 5 · 2015-05-07T21:43:43Z

May 7, 2015 9:43pm

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

Answer 6 · 2015-05-07T21:52:14Z

May 7, 2015 9:52pm

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.

Answer 7 · 2015-05-07T21:57:32Z

May 7, 2015 9:57pm

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

Answer 8 · 2015-05-07T21:59:18Z

May 7, 2015 9:59pm

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

Answer 9 · 2015-05-07T22:01:35Z

May 7, 2015 10:01pm

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

Answer 10 · 2015-05-07T22:02:31Z

May 7, 2015 10:02pm

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

Answer 11 · 2015-05-07T22:03:57Z

May 7, 2015 10:03pm

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.

Answer 12 · 2015-05-07T22:04:49Z

May 7, 2015 10:04pm

ya I figured it our, see line right below that

Answer 13 · 2015-05-07T22:07:53Z

May 7, 2015 10:07pm

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">

Answer 14 · 2015-05-07T22:10:19Z

May 7, 2015 10:10pm

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.

Answer 15 · 2015-05-08T04:33:34Z

May 8, 2015 4:33am

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

Answer 16 · 2015-05-08T05:51:29Z

May 8, 2015 5:51am

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.

Answer 17 · 2015-05-24T19:20:29Z

May 24, 2015 7:20pm

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 :)

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Leite

Joseph Leite

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.

andrew schoenherr

andrew schoenherr

Joseph Leite

Joseph Leite

Joseph Leite

Joseph Leite

wrapper {

logo {

Joseph Leite

Joseph Leite

17 Answers

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite

Joseph Leite

Joseph Leite

Ted Sumner

Ted Sumner

Joseph Leite

Joseph Leite