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 trialJoseph Leite
700 PointsI 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?
Joseph Leite
700 PointsHere'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>
Joseph Leite
700 PointsHere'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; }
Joseph Leite
700 Pointsusing Chrome browser to view. I must obviously be missing something I just don't see it.
17 Answers
Ted Sumner
Courses Plus Student 17,967 PointsFont 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:
I am not sure a font linked in the html counts as a font on the computer. I have had success calling fonts directly.
Joseph Leite
700 PointsAh, 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
Joseph Leite
700 PointsThanks
Ted Sumner
Courses Plus Student 17,967 PointsIn 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.
Joseph Leite
700 PointsI have both My index and my main.css listed above, of course the font is wacky
Ted Sumner
Courses Plus Student 17,967 Pointsadd three marks on the line before your code and the line after your code. It also suggests the language after the first three
marks.
Joseph Leite
700 PointsI'm a novice, what marks are you describing?
Ted Sumner
Courses Plus Student 17,967 PointsLook at the Markdown Cheatsheet linked just under the add answer box. The marks did not appear in my post.
Joseph Leite
700 PointsLike 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; }'''
Joseph Leite
700 Pointsh1 { 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; }
Ted Sumner
Courses Plus Student 17,967 PointsNo. 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.
Joseph Leite
700 Pointsya I figured it our, see line right below that
Ted Sumner
Courses Plus Student 17,967 PointsSee 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">
Ted Sumner
Courses Plus Student 17,967 PointsSo, 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.
Joseph Leite
700 Points<!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>
/**************************************
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;
}
Joseph Leite
700 PointsFirst above is HTML and Second is CSS
Ted Sumner
Courses Plus Student 17,967 PointsMake 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.
Joseph Leite
700 PointsI 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 :)
andrew schoenherr
8,427 Pointsandrew schoenherr
8,427 PointsCan you paste your code?