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
Kyle Snow Schwartz
4,790 PointsBug 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
28,690 PointsIs 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.
Greg Debres
13,086 PointsHey 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!
Kyle Snow Schwartz
4,790 PointsHi 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
28,690 Pointsedit: 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 */
}
Kyle Snow Schwartz
4,790 PointsI 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
28,690 PointsDo any other Google Fonts load for you?
Are you using a local server or simply loading the HTML from the directory?
Kyle Snow Schwartz
4,790 PointsSimply 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
28,690 PointsIs the Google Font link before your CSS file link? The font has to load before you can call it.
israelmaykut
8,730 PointsI 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?
Kyle Snow Schwartz
4,790 PointsKyle Snow Schwartz
4,790 PointsHi 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.