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
Petra Buys
504 Pointsplease tell me why my code is taking to long to run
I have added roboto as a font . When I enter this as a font-family in the CSS main a remark says the code takes to long
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700italic' rel='stylesheet' type='text/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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
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;
}
h1 {
font-family: roboto , sans-serif;
}
2 Answers
Christopher van Ruitenbeek
13,705 PointsI think the @font-face rule would work better here.
Check: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
And it might be an idea to download the font and implement it onto your server. So when the url changes, you will still load the font.
@font-face {
font-family: Roboto; /* You can name this whatever you like */
src: url(sansation_light.woff);
}
Then you have to call the font in the body for instance, or in your case the h1.
h1 {
font-family: Roboto, sans-serif;
}
Hope this works!
*note: I think the @font-face rule would also work with an external link, you'll have to figure that out for yourself!
Petra Buys
504 PointsThank you all for the help ..
MUZ140920 Kudakwashe Murungu
6,316 PointsMUZ140920 Kudakwashe Murungu
6,316 PointsIf you are referencing fonts from an external internet source that could play a role as well depending on the speed the site. Google fonts you are referencing are loaded first before your site is displayed. Normally this is rarely noticed.
To check if its the google fonts causing the slowness you can replace them with normal fonts eg, arial or sans serif