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 trialUnsubscribed User
1,440 Pointsadding 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
1,686 PointsYou 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 :)
Enrique Solano
753 Pointsthis 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
7,914 PointsYou 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
23,126 PointsYou must use a @import like this:
@import url(http://fonts.googleapis.com/css?family=Roboto);
Geert-Jan Hendriks
23,126 Points...and you have to put in your css!
Jakub Kusmierz
6,808 PointsWhile 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
Courses Plus Student 878 Pointsthank you Simon Klit for your informations,it was my fault i was confused.
valentino castilo
304 PointsWHERE IN THE CSS
Alexandra Sikioti
Courses Plus Student 878 PointsAlexandra Sikioti
Courses Plus Student 878 PointsHi!I do the same thing but it doesn't work..any idea?thank you for your time.
Simon Klit
1,686 PointsSimon Klit
1,686 PointsIt'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
10,588 PointsDiego Lucero
10,588 PointsI'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:
Diego Lucero
10,588 PointsDiego Lucero
10,588 PointsYou 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