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
Aquib Javed
8,289 PointsImporting fonts
Hello,
I'm currently in the Web Design track and watching the videos of The Box Model stage. A few lessons ago we were told in a video that we'll be taught how to import customized fonts that are not primarily supported by the browser. I'm a bit confused whether it is going to be discussed ahead or we have to learn it on our own.
My question is how to import customized(or maybe downloaded from the internet) fonts in the html/css file that are not provided by the browser. If it is discussed in a video lesson in the forthcoming lessons in the track, then I apologize in advance. Otherwise I'll be more than grateful if someone helps me here :-)
6 Answers
Zen Hess
6,700 PointsYou will paste the link in your index HTML file, where you call in your CSS file. Be sure to paste it above the link to your style.css, so that when you call it as a font-family in your style.css file, it will know what you're talking about.
So, more simply, link it into your HTML file, then use it by calling on it in you style.css file!
Zen Hess
6,700 PointsIt will be discussed later on in the track! In the meantime, check out Google Webfonts. They have it set up pretty intuitively and explain just how to do it -- plus, they host their own fonts, so you can draw them from their server rather than downloading them and then uploading them on your own site (maybe more convenient than anything).
If you have questions after you get to the video on Treehouse and have looked over Google Webfonts, let us know!
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsYou would place the link to the font in your index.html file, make sure you place it before the stylesheet that will use it is loaded. Then, in your css file, you would add the font-family property to the element you want to have a custom font.
An example using the font Exo 2
<!--- index.html --->
<head>
...
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
<h1>Title</h1>
<p>Some text here...</p>
</body>
// style.css
body{
font-size: 16px;
font-family: 'Exo 2', sans-serif;
}
Here I have loaded the font first, then style.css (which contains the element that will use the font) in he html file. Then applied to the font to the body element in the css file, this will set the font for both the h1 and p within the body to the new custom font. To just change the font style of h1, remove font-family: 'Exo 2', sans-serif; from body and add to h1.
This is just one way of doing it you can also use @import or javascript to achieve the same effect. When you find the font you want and click 'quick-use' this will display the code you need for each different method. Also check out [Getting started - Google Web fonts]{https://developers.google.com/fonts/docs/getting_started} for more info
Hope this helps!
EDIT: formatting
Aquib Javed
8,289 PointsHello Zen,
So just to be sure, (I sort of forgot) in order to use a specific font from Google Fonts, where do I have to paste the link? In the css or in the html file?
Thanks!
Jonathan Hancock
1,478 PointsHi Aquib, I believe it would go in the HTML and then you would refer to it in the CSS to determine which parts it applies to (as James demonstrated above). Hope that helps!
Jonathan Hancock
1,478 PointsHi Aquib, I believe it would go in the HTML and then you would refer to it in the CSS to determine which parts it applies to (as James demonstrated above). Hope that helps!