Wedbfonts and path URL to files

[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?

[rocknbil]

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

"It depends". The url()'s must be relative to the page containing the CSS. If this is in the page itself, it should work as is, but that's always a bad idea. What if you move it? Or call it from some other directory? Then you have to worry about stuff like this ../ or this ../../ or other dot-toothpick nightmares.

Always specify URL paths from the root of the domain. Everywhere, anywhere, in pages for images or other resources, CSS, or Javascript. Then no matter where the files reside it will work. It's really easy. Just add a leading slash. Everywhere.

@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');
}

More examples. EVERYWHERE. :-)
<script type="text/javascript" src="/js/cufon.js"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css"> <!-- or /> for XHTML -->

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

It really doesn't matter, but that makes a lot of organizational sense.

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

Also doesn't matter, with the following considerations: in the example you posted, you have two requests to the server. If you combine those files, it will only be one, trimming off a nanosecond or two from load time. On the other hand, separating files like this is better in terms of organization - you can add or remove any resource at any time. It's a judgement call on what you need.

An aside, this is a perfect example of what NOT to do as I described in #1:

var customPath = ".../Fonts"; //NO. NO, NO!
var customPath = "/Fonts";

4. Should be Webfont CSS before basic stylesheet?

I don't think this matters either, but all the ones I've worked with have the embedded fonts after any layout style sheets, which makes sense - it pushes the overall formatting framework to the client first, then the text formatting (general to specific.)

[g1smd]

The recommendation to link using a leading slash is absolutely crucial once you start getting into URL rewriting.

Start adding the slash now and make it a habit that you continue.

[toplisek]

What is meant to be actually mydomain.com/css/ or just /
Is this relative/absolute path...need more information.

[g1smd]

href="otherfile"

- relative - avoid.

href="../otherfile"

- relative - avoid, avoid, avoid.

href="/otherfile"

- root relative - domain absolute - very useful.

[rocknbil]

What is meant to be actually mydomain.com/css/ or just /
Is this relative/absolute path...need more information.

all you need to remember when first in the path, THIS -> / means "start at the web site's root." You can see this in action. Put this in any page and name it "test.html":

<a href="/">DOMAIN ROOT</a>

What happens? Home page, right? Now put it in a folder/directory inside ANOTHER folder/directory. Don't change it at all.

/images/products/testpage.html (FOR EXAMPLE)

Find it through your browser and click the link again. What happens? Home page again, right? :-) But you didn't change anything. You didn't have to do this

<a href="../../">DOMAIN ROOT</a>

because this

<a href="/">DOMAIN ROOT</a>

means "start at the domain root."

Now extend that to other examples.

<a href="/about">about us</a>
<img src="/images/somefile.jpg" alt="">

#some-selector { background: url(/images/somefile.jpg); }


Move the pages those contain around in your directory structure. Wherever they are, they will work.

The following may confuse you, so you can ignore it. :-) Relative means "relative to where I am now." So if you are in, say, the "about-us" directory, and you do this

href="somefile.html"

it will only work if somefile is in the same "about-us" directory that you're in. It's relative to "wherever you are." But this

href="/somefile.html"

Is also relative, but it's relative to the domain root, not relative to where you are. These are often described as "absolute URL's" but that has never made sense to me; an absolute URL is the fully qualified URL to a resource:

http://www.example.com/somefile.html

It is absolute, it can't be used for anything but what it is, but a root-relative link CAN be moved anywhere. You can even put that same file on another site, and it's still going to go to the root of whatever that domain is.

So the leading slash that is a root-relative URL and the absolute URL become the same result. It just allows you to use it EVERYWHERE. If you use the absolute URL, what happens when you go to a secure portion of your site? EXACTLY . . .http: is no longer valid. But this STILL IS! :-)

href="/somefile.html"