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

Rafael Zuniga
PLUS
Rafael Zuniga
Courses Plus Student 2,373 Points
Posted by Rafael Zuniga
Rafael Zuniga
Courses Plus Student 2,373 Points

What's the difference between linking a web font from google fonts Vs. @font-face and using files like .eot, .woff, etc.

What's the difference between linking a web font from google fonts Vs. @font-face and using files like .eot, .woff, etc.

for example:

link href='http://fonts.googleapis.com/css?family=Changa+One%7cOpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

Vs.

@font-face { font-family : 'Abolition Regular'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype');

2 Answers

Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

From my understanding Embedded Open Type (EOT), Web Open Font Format (WOFF), True Type (TT), and Scalable Vector Graphics (SVG) are all represented to cover all your embedded fonts that you have downloaded, as to where google fonts are handled through a content delivery network (CDN).

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

One advantage of using the CDN is that they will be cached and then used for any other site using the same font. Another is that it will save a fair bit of bandwidth from your own site, since font files can get quite large.

One advantage of locally-stored fonts is that you're not dependent on an outside resource, since they can be down, or change address, or even completely remove the resource you're trying to access (though most of these are unlikely with a service as popular as Google Fonts).

Michael Kalmykov
Michael Kalmykov
8,919 Points
Michael Kalmykov
Michael Kalmykov
8,919 Points

From my experience it's much easier to use google fonts in actual projects. They host everything and in the 5 years I've used them have not once gone down(that i noticed anyways).