Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

Posted by Kush Thakker
Kush Thakker
Courses Plus Student 1,908 Points

Why we have included 'src:' in first two fonts only not other two?

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');

why we didn't write src: in front of wolf and truetype?

1 Answer

Eric Butler
Eric Butler
33,496 Points

Look at the ends of the lines: while the first src line ends in a semicolon (meaning it's the end of the declaration), the file paths in the second src: are separated by commas, which means they are all part of a single declaration -- so they're all part of a single "src". The reason you need 2 srcs at all is because Internet Explorer 9 breaks if you add all those extra fonts to the declaration -- so the first src acts like a fallback declaration for the second one. The second one will be used by all newer browsers. Here is a popular go-to for some more info about the @font-face rule.

Kush Thakker
Kush Thakker
Courses Plus Student 1,908 Points

Thank-you for you answer.