don't understand @font-face override effect

http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/

I found an article about the unicode-range for the @font-face rule and that firefox doesn't support the unicode-range property. But the author found a workaround, which I don't understand.

I don't understand how it should work. The second (fallback) rule use the unicode-range, too. So why it should solve the problem to apply the arial font to to all font characters?

And why in the first version (wihout the unicode-range in the fallback rule) it should work. I expect that the second rule would be apply every time to all browsers?

We can make use of the rules of the CSS cascade to make sure that if unicode-range isn’t supported we get a sensible fallback font. What would be ideal is if we were able to follow up the @font-face rule with a second rule to override it if Unicode ranges aren’t implemented.

@font-face {
    font-family: 'Ampersand';
    src: local('Baskerville'), local('Palatino'), local('Book Antiqua');
    unicode-range: U+26;
}
@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('Arial');
    unicode-range: U+270C;
}

Solution

Came across this article too today. It "works" as follows:

Firefox’s buggy behavior is: when a unicode-range IS GIVEN, then it is ignored and the font gets applied to ALL characters instead.

So when setting 2-times the @font-face with a unicode-range, the second @font-face is used, overwriting the first @font-face 'Ampersand' (CSS does it this way), AND the firefox bug "takes care of" applying Arial to all characters (because a unicode-range is given). We have 2-times an @font-face for 'Ampersand' with the whole unicode-range (in Firefox). So the second one is applied by CSS. That’s why it works.

Browsers that DO support unicode-range the right way, use the first @font-face declaration for the given unicode-range and the second @font-face for the given unicode-range – while the unicode-range of the second @font-face specifies a character, that is hardly ever used by anyone. Nothing gets overwritten via the cascade here.

Hope that helps! (And is right. ^^)

EDIT¹:Maybe I should add: this results in Firefox not displaying "the best possilbe Ampersand", but an Arial-Ampersand. The whole solution described is a fallback-solution including special treatment for Firefox – NOT enabeling the Unicode-Range-Ampersand-Trick for Firefox.

EDIT²: Maybe I also should add, that I just found out, that Opera doesn’t support the unicode-range also (yet). So it’s not only Firefox.