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

Why not Google Fonts?

As a developer why would I use this when I can go to Google Fonts and pick something?

Sorry if this is a dumb question lol.

Nina Geise-Hamblin
Nina Geise-Hamblin
10,356 Points

Not a dumb question!! I was wondering the same thing and the answers you got really helped me!! :)

2 Answers

The short answer is that Google Fonts is a great resource, and you can probably get away with using it pretty much all the time if you want to. The basic reasoning for both goes something like this, though:

When you use a CDN, the font will be cached so it can be used with any other website using the same font. It also saves you some bandwidth, since you aren't hosting the font files.

When you use locally stored fonts, the main potential advantage is not having to worry about being dependent on another service - things can happen outside of your control, like the server going down, or the resource you're using being moved or removed entirely. However, with the popularity and reliability of a service like Google Fonts, for example, a lot of these concerns are less... concerning.

Either way, it's probably good to know how to use a local font, at least.

Thank you!

Because your site needs to be available in China (Google URLs are blocked there).

Or, more commonly, because your client wants to use the (proprietary) font that matches their brand guidelines or their designer's approved page designs.

That's it. From a technical/performance perspective, Google Fonts is the best decision, always. They do way more than just store fonts; they optimize the crap out of those requests, beyond what you'd ever want to do. And there is practically no way that Google will be unable to deliver fonts unless the entire internet goes down. Plus, unlike other webfont providers (Typekit, cloud.typography, etc.), there's no JavaScript or validation slowing down delivery. So if it's up to you, use Google Fonts.

Thank you!

Now my next question - is where or how did he come up with that .snippet.css file? I have never downloaded fonts from the internet so I am unfamiliar :)

Thank you!

Vanessa, Lots of folks turn to FontSquirrel to find open-source webfonts. They have a "webfont generator" tool that you can try to use to convert normal TTF or OTF font files to appropriate webfont-files (some fonts are license-restricted and won't work, but others will).

There are other places to buy webfonts, too, like MyFonts.com. Regardless, once you have the webfont files, you can create the CSS rules yourself (like Guil does in the video's webfont-snippet.css file), or the place that you got the webfonts from might provide a pre-made CSS stylesheet with the webfonts that's ready to go.