CSS, Font-face, Squirrel generator

Question

I try to understand the generated code via Squirrel, here is the output:

@font-face {
    font-family: 'someFont';
    src: url('someFont.eot');
    src: url('someFont.eot?#iefix') format('embedded-opentype'),
         url('someFont.woff') format('woff'),
         url('someFont.ttf') format('truetype'),
         url('someFont.svg#someFont') format('svg');

    font-weight: normal;
    font-style: normal;
}

I don't understand why the first src: url('someFont.eot'); is even required, I do understand the IE problem so I understand the requirement for: src: url('someFont.eot?#iefix') format('embedded-opentype'), but what is the reason for the first src?

And last thing to note what is the reason for #someFont after someFont.svg is it needed to prevent some kind of bug?

MTM · Accepted Answer · 2014-07-19T10:57:55.513

1

src: url('someFont.eot'); is for IE9 compatibility Modes, while src: url('someFont.eot?#iefix') format('embedded-opentype') is for IE6 to IE8.

edited Jul 19 '14 at 10:57

answered Jul 19 '14 at 10:23

MTM

919
10
22

I understand, but why not just leave IE9 the `src: url('someFont.eot?#iefix'`? – Aviel Fedida Jul 19 '14 at 10:26
This is how IE works, even for IE9+ both of these will not work but `woff` will. – MTM Jul 19 '14 at 10:35
So as far as I understand the first line is for IE9 because it won't understand the `src: url('someFont.eot?#iefix'`, the second line `src: url('someFont.eot?#iefix'` is for IE6-IE8, and the `woff` is for IE9+, am I right? – Aviel Fedida Jul 19 '14 at 10:38
`SVG` is a vector re-creation of the font so i guess it requires the font name. – MTM Jul 19 '14 at 10:39
`woff` is for all modern browsers. – MTM Jul 19 '14 at 10:40
Yes but was I right with my understanding at above comment? – Aviel Fedida Jul 19 '14 at 10:40
I haven't tried to shuffle the positions, will have to test it to confirm. But you have a point. – MTM Jul 19 '14 at 10:43
One last thing maybe if you can expand a bit about the svg and the vector re-creation, I have no idea at all about vectors, maybe a few words to help me focus here... – Aviel Fedida Jul 19 '14 at 10:47
http://stackoverflow.com/questions/14687657/why-do-font-squirrels-font-face-definitions-contain-two-src-declarations – user3212461 Jul 19 '14 at 10:50
My question is almost identical -.- – Aviel Fedida Jul 19 '14 at 10:53

CSS, Font-face, Squirrel generator

1 Answers1