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

Posted by Ebrahim Haji
Ebrahim Haji
6,712 Points

What is the difference between @font-face, importing fonts using @import, and using the link tag for fonts?

Why and When should you use them?

1 Answer

Herb Bresnan
Herb Bresnan
10,658 Points
Herb Bresnan
Herb Bresnan
10,658 Points

As fonts are concerned: @import: When you use @import, you have to include the font file your HTML head tag. When a user visits your site, they are sending a request to the server for the HTML, CSS, and font files. The more files you add, the more requests to the server there are. This could slow down the performance of your site.

@font-face: Using Google fonts as an example, you would choose the font you want to use, copy and paste a link that Google provides in your HTML. When the font is needed, the link you included will retrieve the font from Google website. This is faster because you don't have to include additional files in your HTML <head> tag. That means fewer server requests and better performance.

Ebrahim Haji
Ebrahim Haji
6,712 Points

Thanks for the answer.