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

CSS CSS Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

Konrad Dziekonski
Konrad Dziekonski
7,798 Points

Lost in "fonts" topic


Could someone please explain how exactly do I deal with the fonts? In this topic: https://teamtreehouse.com/community/fontface-vs-link-href-google-fonts

Adam said that I need to use @font-face only when i have fonts on my computer

And in my understanding, if you declare a font in html using <link href=""> than You dont need to declare it in @font-face, you just use it thru font-family is that correct? I dont quite understand what Steven meant in this topic


"You might be using a "link" to load in a stylesheet for a font, but if you look at that stylesheet, you will find that it contains "@font-face" to actually load the font."

im on google fonts looking at https://fonts.google.com/specimen/Liu+Jian+Mao+Cao?selection.family=Liu+Jian+Mao+Cao and i cannot see anything about @font-face only the link to html and css and some @import which im net familiar with yet.

Also I have downloaded some fonts from fontsquirrel.com and most of them are in OTF format and contain a lot of otf files which i dont no what to do with. There was nothing about this file type in the course. There are some TTF, but does it mean there are only fonts for Android and IOS, and i cannot use them on desktop?

Also if I download the font, and declare it thru @font-face and will link the files properly than this font will be automatically downloaded by anyone who visits my site? Will the person be able to see what i see ?

Thanks in advance for breaking this process down for me. Konrad

1 Answer

Juan Rivera
.a{fill-rule:evenodd;}techdegree seal-36
Juan Rivera
UX Design Techdegree Graduate 16,144 Points

When on treehouse i usedthe @font-face like they were showing, but if i'm doing a project and using googlefonts..I used the link url they give you for the html to put inside the head tag. So If i'm understanding your question......you NEED to do @font-face unless you method of importing a font is through font-face. You can use the other means as well for personal projects or anything outside of treehouse. I only used it for the courses on here cause I'm doing the techdegree.