CODEWITHSUNDEEP
css
Esa
Esa

Reputation: 1666

CSS @Import: Imported .css file has sources that are urls

I have a little problem that I just cant solve. I have a css-file that imports another css-file which contains a font. Now this imported css-file has a list of these e.g:

src: url(my-font.eot)

When I publish the site, it does not find the font files. I have tried all sorts of paths such as:

src: url(../Content/css/<filenamehere>.eot
src: url(../css/<filenamehere>.eot

I know the font-css is in the server and import from the main.css works because there are two files that are imported and the other one works fine.

EDIT: My Imports look like this:

@import url('../css/stuff1/stuff1.css');
@import url('../css/stuff2/stuff2.css');

/EDIT

What paths should I give to these font files in the font-css?

Upvotes: 1

Views: 2358

Answers (2)

Esa
Esa

Reputation: 1666

After going through the server's files. I found that not all of the font files were sent to the server during publishing. After copy and pasting all the font files to the server the font was found and was loaded when browsing the site. Apparently there was nothing wrong with the imports. Thank you for your assistance.

Upvotes: 2

mu is too short
mu is too short

Reputation: 434665

Your best bet is to use absolute paths everywhere all the time, relative paths just cause trouble and introduce unnecessary coupling and brittleness. I don't know your exact structure but I think you probably want this:

src: url(/css/<filenamehere>.eot);

Or possibly this:

src: url(/Content/css/<filenamehere>.eot);

The same advice applies to referencing your CSS and JavaScript files.

Upvotes: 2

Related Questions