Why Firefox ignores custom font from #font-face? - css

Question

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;
}

Answer 1

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