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

HTML

Posted by Jonathan Carpenter
Jonathan Carpenter
10,251 Points

Google Fonts Issue

I'm brushing up on some HTML/CSS skills and I've run into an issue with gFonts. Here is my code: 

<html>
 <head>
  <meta charset = "utf-8"
  <link href="styles.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  <title>Placeholder title</title>
 </head>

And the CSS: 

p {
    font-family: 'Roboto Condensed', sans-serif;
}

Now both files are located in the same folder but for some reason it's defaulting to sans-serif and not using my gFont. I did some tests and it turns out that my font-family code isn't working at all.

Other things like background color work fine so the stylesheet is linked.

How can I fix this?

Thansk

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jonathan,

I fixed your code formatting for you.

See this thread on how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum

Jonathan Carpenter
Jonathan Carpenter
10,251 Points

Thanks. Sorry about that.

3 Answers

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Hello Jonathan,

Looking at your code again, it looks like you have your stylesheet before the link to the google fonts. Try switching the order.

-Agapito

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're also missing the closing angle bracket on the meta tag.

<meta charset = "utf-8"
Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Hello Jonathan,

Have you included a @font-face rule in your CSS that specifies your Google Font before you tried to use it? Something like this:

@font-face {
    font-family:"Roboto Condensed";
    src: url("path/to/Roboto_Condensed.ttf");
}

You should be able to use the included font with your subsequent font-family properties.

I hope this helps.

-Agapito

Jonathan Carpenter
Jonathan Carpenter
10,251 Points

Does this only work if you've downloaded the font on the local machine?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I don't think you need to do this here because it's in the css file that you're linking to from google.

Have you added in the missing angle bracket and reversed the order of the links?

Jonathan Carpenter
Jonathan Carpenter
10,251 Points
Jonathan Carpenter
Jonathan Carpenter
10,251 Points

Yes, I got everything working, thanks.