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

CSS How to Make a Website Customizing Colors and Fonts Add Fonts

Posted by Unsubscribed User
Unsubscribed User
1,440 Points

adding font in challenge task

Choose a font from Google Fonts and include it into the page. This should be suitable for a headline element. This is the task- do I put it in html or css? How does it look?

6 Answers

Simon Klit
Simon Klit
1,686 Points
Simon Klit
Simon Klit
1,686 Points

You copy the link snippet from Google Fonts, and paste it somewhere between the opening and closing of the head tag. In this case, you should paste it before the "link rel="stylesheet" href="css/main.css"" line.

Then, in the CSS you add the font's name to the h1, h2 { rule set, using the font-family property. Like so:

h1, h2 {
  color: #fff;
  font-family: "Open Sans"; //In case you imported the Open Sans font from Google Fonts
}

To get the font from Google Fonts, you go to http://google.com/fonts and find the font you want. Then you click on the middle grey button, the one with an arrow pointing to the right, on the font that you want to use. After loading the next page, scroll down and copy the line from where it says "Add this code to your website". This is the one I was talking about earlier.

And, it's really that simple :)

Alexandra Sikioti
Alexandra Sikioti
Courses Plus Student 878 Points

Hi!I do the same thing but it doesn't work..any idea?thank you for your time.

Simon Klit
Simon Klit
1,686 Points
Simon Klit
Simon Klit
1,686 Points

It's tough to say, Alexandra. Did you follow the instructions closely?

A possible cause could be that you're not referring to the font by it's proper name, in your CSS. Make sure that "font-family" is referring to the font you imported. To find out whether it is or not, go to the Google Fonts page, and scroll down to step 4. Copy and paste that "font-family" snippet in to your CSS, and see if that fixes it.

Another possible casue could be that you're not linking to the font properly. If you're using Google Chrome, try opening the Developer Tools by hitting CMD + ALT + I for mac, and CTRL + ALT + I for Windows. Then, in the right hand side of the Developer Tools, check for a red x with a number next to it. If it's there, click it, and see what it says. If it says something about 404 and Google Fonts, then you're not linking to the font properly. Make sure you follow my instructions properly.

Diego Lucero
Diego Lucero
10,588 Points

I'm not getting this one. I'm sure that I included it properly.

Here is my code in the head of my HTML:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

My CSS:

h1, h2 {
  color: #fff;
  font-family: "Open Sans"; 
}
Diego Lucero
Diego Lucero
10,588 Points

You know, it turns out it gave the error because I pasted the html code after the stylesheets were loaded. WHen I moved it to before the stylesheets, it worked perfectly.

Thank you, Simon

Enrique Solano
Enrique Solano
753 Points
Enrique Solano
Enrique Solano
753 Points

this is my css: @import url(https://fonts.googleapis.com/css?family=Oswald:700); iv'e tried everything and it still saysBummer! It doesn't look like you've added a font from Google Web Fonts yet.

Jakub Kusmierz
Jakub Kusmierz
7,914 Points
Jakub Kusmierz
Jakub Kusmierz
7,914 Points

You need to put the following code in your HTML file, before your CSS stylesheet since it is loaded in the order you write it.

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

Then in your CSS file, you need to make sure your headings use the font by adding it to the font-family as follows.

h1, h2 {
  color: #fff;
  font-family: 'Oswald';
}

Using import directly in your CSS would work in the real world, but it is not what the challenge is looking for and unfortunately this was not explicitly communicated.

Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points
Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points

You must use a @import like this:

@import url(http://fonts.googleapis.com/css?family=Roboto);
Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points
Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points

...and you have to put in your css!

Jakub Kusmierz
Jakub Kusmierz
6,808 Points
Jakub Kusmierz
Jakub Kusmierz
6,808 Points

While your solution is the more elegant one in terms of keeping structure and presentation separate, unfortunately the workspaces for code challenges aren't very forgiving and require you to place a <link> in the main HTML document. The font is then called from the CSS.

Alexandra Sikioti
PLUS
Alexandra Sikioti
Courses Plus Student 878 Points
Alexandra Sikioti
Alexandra Sikioti
Courses Plus Student 878 Points

thank you Simon Klit for your informations,it was my fault i was confused.

valentino castilo
valentino castilo
304 Points
valentino castilo
valentino castilo
304 Points

WHERE IN THE CSS