Path to Webfonts files in the correct way

[toplisek]

I have the following CSS structure:

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

1. How to set correct path to this Webfont as I like to set different folder for all webfonts.

@font-face{
    font-family: 'webfonts/MyWebFont';
    src: url('webfonts/WebFont.eot');
    src: url('webfonts/WebFont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/WebFont.woff') format('woff'),
         url('webfonts/WebFont.ttf') format('truetype'),
         url('webfonts/WebFont.svg#webfont') format('svg');
} 

Check folder webfonts/

2. Should be always all files in the same directory like defined CSS?

3. Should we separate Google webfonts, Myfonts, Cufon folder inside CSS folder?

Sample Cufon:

<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/.font.js"></script> 

Cufon.registerFont(

Sample Myfonts.com:

<script type="text/javascript">
    //change this to true to enable troubleshooting mode
    var myfont_webfont_test = false;
    // change this to false if you're having trouble with WOFFs
    var woffEnabled = true;
    // to place your webfonts in a custom directory, uncomment this and set it to where your webfonts are.
    var customPath = ".../Fonts";
</script> 

Check /Fonts directory

4. Should be Webfont CSS before basic stylesheet?

[handcraftedweb]

You can put your web fonts in it's own directory, but don't include that directory name in the name of the font, that is simply a name you're going to use and not a file name:

@font-face{
    font-family: 'MyWebFont';
    src: url('webfonts/WebFont.eot');
    src: url('webfonts/WebFont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/WebFont.woff') format('woff'),
         url('webfonts/WebFont.ttf') format('truetype'),
         url('webfonts/WebFont.svg#webfont') format('svg');
}
body { font-family: MyWebFont, Arial, Helvetica, sans-serif; }

I don't know how Cufon or google fonts work.

[toplisek]

How to set path actually? Absolute?Relative? /

[handcraftedweb]

How to set path actually? Absolute?Relative? /

I set it relative to CSS file that references the font. Usually I have a subdir for CSS and a subdir for fonts so the css looks like this:

@font-face {
    font-family: 'AmaticSCRegular';
    src: url('../fonts/AmaticSC-Regular-webfont.eot');
    src: url('../fonts/AmaticSC-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AmaticSC-Regular-webfont.woff') format('woff'),
         url('../fonts/AmaticSC-Regular-webfont.ttf') format('truetype'),
         url('../fonts/AmaticSC-Regular-webfont.svg#AmaticSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}