relative file path to fonts in css file

Question

I have a stylesheet that is referenced in the header:

<link href="./css/stylesheet.css" rel="stylesheet">

All of the css works in it except this specific code:

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

When I put the above @font-face CSS in the page above where the icons are being shown it works but when I put it in the CSS file it stops working. I finally found out that this was likely due to the file path not being correct.

Here is the file structure:

Looking at this article (https://css-tricks.com/quick-reminder-about-file-paths/) it looks like I should either use:

url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')

to go back to the root and then into the fonts folder. But the icon still is not rendering from the CSS file.

What am I doing wrong and how do I fix it?

Answer 1

URLs in CSS files are relative to the CSS file.

url('fonts/icomoon.eot?hsw0h3'); means http://example.com/css/fonts/icomoon.eot?hsw0h3, but your screenshot of your directory structure shows you need http://example.com/fonts/icomoon.eot?hsw0h3.

Add ../ or /