Why are there two "src:" declarations rather than one?

Question

In the @font-face rule, why are there two "src:" declarations?
@font-face {
    font-family: "DroidSerifBold";
    src: url('fonts/DroidSerif-Bold-webfont.eot');
    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
             url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
             url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
Is it not allowed to be like this?
@font-face {
    font-family: "DroidSerifBold";
    src: url('fonts/DroidSerif-Bold-webfont.eot'),
           url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
             url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
             url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
Just curious so I'll be able to know for the future. Thanks!

myackley35 · Accepted Answer

Kyle,
All of the "src:" declarations are necessary for the rendering engines to pick out the type of web font file that best applies to the browser. It would make a lot of sense to have everything nested under one "src:" but this is kind of the fallout from the browser makers not being able to come to a consensus on how to implement web fonts.
Here's an article that explains more on @font-face. (http://css-tricks.com/snippets/css/using-font-face/)
I hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

Kyle Nieber

Kyle Nieber

Why are there two "src:" declarations rather than one?

1 Answer

myackley35

myackley35

Kyle Nieber

Kyle Nieber