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

WordPress How to Build a WordPress Theme Preparing to Code WordPress Templates Linking CSS

Luke Lee
Luke Lee
7,577 Points
Posted by Luke Lee
Luke Lee
7,577 Points

What are the webfonts?

In this video, Zac copied webfonts folder into css folder, within webfonts folder, there are many files such as .eot, .svg, .ttf, .woff what are those files for? how do we use them? are they all necessary?

2 Answers

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

Just as there are many different types of pictures, JPG, PNG, GIF, there are also many different types of font types.

You must be careful with what file types you use though. Some browsers do not support certain file types, such as IE8 does not support .woff (I've been told).

The way most people install fonts, and Google.com/fonts does it, is through the CSS command @Font-Face.

I hope this helps :)

Luke Lee
Luke Lee
7,577 Points
Luke Lee
Luke Lee
7,577 Points

Thank you, I have used google fonts, they only ask me to include <link href='http://fonts.googleapis.com/css?family=xyz' rel='stylesheet' type='text/css'> in header, why do I need to download those fonts?

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

You do not need to download them. They are stored on Google servers. With Google Fonts, all you need to do is put the code in the header, like it says, and include the CSS code in the CSS. It should read something like font-family: Arial, sans-serif;

:) Thanks.

Oliver Weber
Oliver Weber
4,868 Points
Oliver Weber
Oliver Weber
4,868 Points

Normaly a browser can just show fonts which are installed, on the system thats why when you declare a font in css you do like this:

  p{
      font-family: Arial, sans-serif;

This means nothing else then use Arial and when Arial is not available use any sans-serif font which is available on the system.

With webfonts you are able to present always the same font which you wanted that they see. (When the browser is compatible with webfonts)

Google webfonts is a huge library of webfonts. There you also find how to use them.

Hope you get comfy with webfonts cause they rock.