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 motty
motty
21,787 Points

Method of importing/embedding web fonts

Hey,

Guil, you showed me how to import web fonts via "Google web fonts" and there were three options of embedding the font: HTML, @import (CSS), and via Javascript. You used the HTML link. Can you explain when (or why) you'd use the different methods? Does it matter? Also, most importantly, does it make a difference on the load time?

Thanks.

motty
motty
21,787 Points

Guil Hernandez

1 Answer

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

@import is just tidier for me. It's putting it in the CSS directly which is where it strictly speaking belongs as its styling. All styling goes in your CSS file so that's where I put my font.

Also, if its only been used on one or two pages, then it will improve loading times as it'll only be loaded when needed rather then all the time like it will be when in the head.