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
Andre Acres
3,232 PointsCan we use @font-face in external CSS instead of including it in the HTML?
I want to include multiple fonts in my page and I'm not sure how to do this in html, whereas doing that seems to be more intuitive in CSS.
3 Answers
Christopher De Lette
Courses Plus Student 7,139 PointsHi Andre,
You most certainly can use the @font-face rule in your CSS, however, there are many 'gotchas' that can make it difficult when rendering a website with the fonts you selected in your CSS. For example if you want a certain font for a media query you need to place the @font-face rule directly before and outside the @media query. There are a few browser support issues as well although most users are using modern browsers so these have issues have mostly been eliminated. The other thing is they have to be installed locally to the web-server hosting your site.
If you want to use multiple online fonts from Google, Typekit, etc. all you have to do is link them in the <head> tag of your html doc.
Take care and hope this helps!
Christopher De Lette
Courses Plus Student 7,139 PointsHi Andre,
You can put them in one link tag and is the way i prefer to add web fonts. Here is an example as Tadeáš Firich mentioned:
<link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed|Source+Sans+Pro" rel="stylesheet">
That line is adding two fonts, Saira Semi Condensed and Source Sans Pro. You can add all sorts of typography this way. The only time i use different lines is when it's from another source, say typekit, or when it's highly specialized like the new beta fonts google has put out for public comment.
Hope this helps,
Take care and Happy Coding!
Tadeáš Firich
7,866 PointsHello Andre there is a simple way just put the next fonts behind the first font.
Is it hepful for you?
Andre Acres
3,232 PointsCan you show me a screenshot of exactly how this should look?
Andre Acres
3,232 PointsAndre Acres
3,232 PointsCan I just link them separately, like this:
<html> <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'> </html>
Or is it best do it like this:
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Thanks so much for your help!