@font-face not working as expected in Firefox 3.6 for the mac

I'm developing a website on my staging server in Firefox 3.6 at http://downhamcottage.co.uk/test

I have a css file linked to the site which is

I get the lower fonts in the font stacking order eg the sans serif on initial page load and then the Museo 300 and 500 font kicks in as soon as the user clicks on to another page. It works ok in other browsers even in ie7! The @font-face style used in the stylesheet is as follows:

@font-face {
font-family: 'PermanentMarkerRegular';
src: url('../fonts/permanentmarker-webfont.eot#') format('eot'), 
     url('../fonts/permanentmarker-webfont.ttf')  format('truetype'),
     url('../fonts/permanentmarker-webfont.woff') format('woff'), 
     url('../fonts/permanentmarker-webfont.svg#webfontEHg8OqO7') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo300';
    src: url('museo300-regular-webfont.eot');
    src: url('../fonts/museo300-regular-webfont.eot#') format('eot'),
         url('../fonts/museo300-regular-webfont.woff') format('woff'),
         url('../fonts/museo300-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo300-regular-webfont.svg#webfontGEzJeS93') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Museo500';
    src: url('museo500-regular-webfont.eot');
    src: url('../fonts/museo500-regular-webfont.eot#') format('eot'),
         url('../fonts/museo500-regular-webfont.woff') format('woff'),
         url('../fonts/museo500-regular-webfont.ttf') format('truetype'),
         url('../开发者_开发问答fonts/museo500-regular-webfont.svg#webfontZgaZZaau') format('svg');
    font-weight: normal;
    font-style: normal;
}

Any thoughts as to why this would happen on firefox 3.6 for the mac would be appreciated, as I say it looks great on other browsers?

From what I understand Firefox in general doesn't like css within ' it seems to need to be within "

ie:

@font-face {
     font-family: "PermanentMarkerRegular";
     src: url("../fonts/permanentmarker-webfont.eot") format("eot"), 
     url("../fonts/permanentmarker-webfont.ttf")  format("truetype"),
     url("../fonts/permanentmarker-webfont.woff") format("woff"), 
     url("../fonts/permanentmarker-webfont.svg#webfontEHg8OqO7") format("svg");
     font-weight: normal;
     font-style: normal;
}

Also you have a # at the end of your .eot file, I am not sure why you would need that

It might have been because it still wait for the fonts to be download. From Mozilla:

When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading. As each web font finishes downloading, Gecko updates the text that uses that font. This allows the user to read the text on the page more quickly.