Why Firefox ignores custom font from @font-face?

Let’s say we have a font-face section like that

@font-face {
   font-family: 'F';
   src: url("/fonts/F.eot?") format("embedded-opentype"); 
   src: local('?'),
        url("/fonts/F.woff") format("woff"),
        url("/fonts/F.ttf") format("truetype"),
        url("/fonts/F.svg") format("svg"); 
   font-weight: normal;
   font-style: normal;
}

and a body style

body {
font-family: 'F' /*, sans-serif*/;
}

Now, if I uncomment sans-serif it will take priority over custom font despite the fact it is mentioned at the end. Why? How do I specify a back-up variant for those who can’t use downloadable webfonts?

===upd===

If in doubt why local('?') is used, look here http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley

I was wrong in my thinking that it is sans-serif breaking my CSS, here is actual code that shows custom 'F' font. If 'Trebuchet MS' will be uncommented, font-family drops to sans.

body {
font-family: 'F' /*, 'Trebuchet MS'*/ , sans-serif;
}

Solution

Your syntax seems to be slightly incorrect. The '?' at the end of the first 'src' property value is aimed towards fixing IE versions 6 through 8, but could actually be affecting Firefox. The correct syntax to use is:

@font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
        }

Source: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax