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

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,512 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.