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 /

Answer 2

../需要在路径之前添加以在层次结构中向上移动一个文件夹（ ../../path ）以在层次结构中向上移动两个文件夹

Answer 3

Consider describing the font sources individually without any version specification (I guess) like,

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

Alternatively, you may also remove the format specification and let the browser to determine automatically, if problem still persists.