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!

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

Adriano dos Reis
Adriano dos Reis
1,766 Points
Posted by Adriano dos Reis
Adriano dos Reis
1,766 Points

Why there is two "src" in a @font-face?

In the CSS(Deep Dive) videos about Web Fonts whenever there was a "@font-face" property, Guil Hernandez would have two "src:url"(in this image for ex: http://www.clipular.com/c/5697381332942848.png?k=z7PEcdlQGZg-91gXtuW1ZzBSkTs)

Why does it have to be 2 src elements and after the second one you can just list the rest of the fonts, it wasnt very clear in the video.

Thanks for your time :)

Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Adriano dos Reis:

Due to the quirkiness of IE, the use of 2 srcs is used to account for older versions of internet explorer that other browsers ignore while accounting for other browsers at the same time.

The first use of src is specifically for older versions of IE. While other browsers ignore it, including new versions of internet explorer, they still have to be accounted for (and it's much more important to account for them).

Therefore a second src is needed, a second declaration of src that older versions of IE do not recognize.

Does that make sense?

Adriano dos Reis
Adriano dos Reis
1,766 Points
Adriano dos Reis
Adriano dos Reis
1,766 Points

Hi Kevin,

Thanks for the answer! However it is still ticking a little bit to me.

In my head based on your answer the first and the second "src"s are for older versions of IE. Does it mean that if IE didn't exist at all, you wouldn't even have to use the "src"?

The only thing that is bugging me is why the first line that stars with "src" closes with the ";" and then the second "src" you can include all the other font types. Would it work if I used only one "src" but still list all the 5 fonts types that are in the image?

ps. Sorry I ended up answering in the wrong place(bellow) lol

thanks

2 Answers

Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hello again, Adriano:

While in normal cases if a CSS author were to declare the same property twice only the second declaration would apply and the first one ignored, but that's not the case here.

First and foremost, if a property has two declaration referred to it for a single selection rule, it has to be understood by the browser twice for the second declaration to win out. In this case, older versions of IE only sees one src it understands, and so do modern browsers that (usually) only understand the second declaration.

Older versions of IE only understand the first declaration, while modern browsers either don't understand the first declaration that's usually written in a non-standard way or override it with the second declaration.

Using both, you take account both older versions of IE that only understand the first declaration while providing the second for browsers that can understand a more standard-compliant way of supporting a custom-font for your web page.

Was that explanation better?

Adriano dos Reis
Adriano dos Reis
1,766 Points
Adriano dos Reis
Adriano dos Reis
1,766 Points

yes, thanks a lot man!

Have a great day!

Adriano dos Reis
Adriano dos Reis
1,766 Points
Adriano dos Reis
Adriano dos Reis
1,766 Points

Hi Kevin,

Thanks for the answer! However it is still ticking a little bit to me.

In my head based on your answer the first and the second "src"s are for older versions of IE. Does it mean that if IE didn't exist at all, you wouldn't even have to use the "src"?

The only thing that is bugging me is why the first line that stars with "src" closes with the ";" and then the second "src" you can include all the other font types. Would it work if I used only one "src" but still list all the 5 fonts types that are in the image?

thanks

Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

The second declaration is the standard way of registering a custom font-face, providing multiple filetypes for browsers that don't understand specific file formats; eot is the only format older versions IE understood, while other browsers have similar quirks.

Because older versions of IE don't understand multiple versions of the same font having all sorts of filetypes being associated with it, you need the first declaration.

Modern browsers understand that the second declaration providing them the information they need to use the first/best font format it understands for the custom font-face you want to use.