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 How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Bug or mistake? Taking backup font instead of main font.

/*When my code looks like this:  */

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
}

/* the website takes the sans-serif font instead of the Changa One font.  When my code it looks like this: */

h1 {
  font-family: 'Changa One';
  margin: 15px 0;
  font-size: 1.75em;
}

/* it takes the Changa One font just fine. Anyone know why this is happening? */

4 Answers

Sean T. Unwin
Sean T. Unwin
28,660 Points

Is the font being called correctly? What I mean is, is there a typo in the link referencing the font in your HTML file?

You can see the way it should read at 2:35 in the video.

Hi Sean, I'm quite sure the link is correct. I just coppied and pasted from google fonts. And if it wasn't correct, then I think the second block of code without the "backup" font wouldn't work either, yet it works fine.

Greg Debres
Greg Debres
13,084 Points

Hey Kyle, I did some looking into the changa one font on Google fonts and found something interesting. http://www.google.com/fonts#UsePlace:use/Collection:Changa+One

Apparently its a cursive font. who knew! So when you add 'sans serif' as the back up, the browser knows that better than 'Changa One' and selects that instead. That's my educated guess!

Hi Greg, thanks for your response. I asked a friend and they said something similar. Apparently I might need some kind of "before" tag in order to get the code to retrieve googles font before just settling for the backup.

Sean T. Unwin
Sean T. Unwin
28,660 Points

edit: I didn't go to the link initially that Greg Debres provided. I see it has the same thing on that page. ;-p

This should work as a test to see if it's loading,

h1 {
  font-family: 'Changa One', cursive; /* or just try 'Changa One' without a backup */
}

I tried it without a backup, as I said before, and it loads fine.

I also tried it with cursive, which I hadn't said, but that also loads cursive instead of Changa One.

Sean T. Unwin
Sean T. Unwin
28,660 Points

Do any other Google Fonts load for you?

Are you using a local server or simply loading the HTML from the directory?

Simply loading from the HTML from the directory. I'll have to see if I continue to have the same problem with another google font.

Do you know anything about 'before' tags? So that it checks for changa one before it just settles on sans-serif?

Sean T. Unwin
Sean T. Unwin
28,660 Points

Is the Google Font link before your CSS file link? The font has to load before you can call it.

I have the same problem with Changa One. Seams to take the backup and even if i remove the backup it still looks like sans serif. Maybe its getting that from the normalize.css. Not sure but the Changa One is not coming through. Any ideas?