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 trialMUZ140259 Juliana Kofi
9,532 Pointshow to choose font from google
help me out ..how to choose font from google
<!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>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;
}
2 Answers
Edgars M
2,019 PointsGo to the google fonts library and choose fonts You desire. Rest is explained there but in general just put a link to these fonts in Your head element like this
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
and use it in Your CSS
font-family: 'Open Sans', sans-serif;
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, @Juliana Kofi:
Assuming you want to begin using a specific font provided by the Google Fonts service, you generally have three options
Import it directly in a CSS stylesheet through
@import
with pre-defined declarations to use the webfontLink to a stylesheet full of declarations to be able to use the web font that is declared before the stylesheets you want to use the web fonts
Asynchronously load the webfont to be used with the declarations you want the webfont to be used with using the Webfont Loader API (code that Google Fonts provides you involving JS)
The latter is the most desirable while the latter 2 are perhaps easiest to use the webfont for prototyping purposes.
Asynchronously loading webfonts is the most preferable way of serving webfonts on the web for a variety of reasons:
- It doesn't slow down the loading of the web page
- Content can be read rather than be missing if the webfont fails to load or completely apply on a web page for some strange reason
- Typically ensures you have a reasonable fallback for mobile/desktop users who can't view or don't want the web font loaded.
The code to do this usually looks like the following:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>
For more information about the Web Font Loader API, please refer to this documentation