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
Gregory Polit
311 PointsGoogle Fonts
How do I include Google Fonts on the CSS main page and make it suitable for headline elements??
2 Answers
Travis Eubanks
12,566 Pointsgo to google.com/fonts
find the font you want and click 'quick use' icon
scroll down till you see 'add this code to your website' copy the piece of code shown
go to your index.html page inside the <head> tags paste that code right under the "normalize.css" link
Back to the google page with your desired font, scroll down till you see 'integrate fonts into your css'
copy and paste that code inside curly brackets for whatever element your selecting
ex:
header { font-family: 'Open Sans', sans-serif; }
let me know if that helps.
Shawn Williams
Courses Plus Student 4,462 PointsOnce you have chosen your font from Google fonts, you must create a link to the source file in your <head> section of your html page. This <link> must be placed before the link to the CSS file that you are using to style the page, or the one in which you are making the font-family declarations. The reason for this is that if you place the <link href='http://fonts.googleapis.com/css?family...'> after the "<link rel="stylesheet" href="main.css"> (or whatever naming convention you used), then the CSS file will not recognize the Google font that you declared.
As Travis stated, it should go after your normalize.css or reset.css stylesheet link, but before your main page stylesheet.