Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Importing 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
Zen Hess
6,700 Points

You 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
Zen Hess
6,700 Points

It 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!

You 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

Hello 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!

Hi 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!

Hi 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!