Can Relative Paths Be Used for @Font-Face Src

relative file path to fonts in css file

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 /

Can relative paths be used for @font-face src?

Seems the issue was that it doesn't like the single quotes ' around the name.

Path for css font face

Relative URLs are allowed and are relative to the URL of the stylesheet (not to the URL of the web page).

Quote from MDN.

So if you are using relative paths, be aware of the path of your .css file. Assuming your file is also in the assets/css directory, most probably the correct path would be:

@font-face {
    font-family: 'ralewaythin';
    src: url('fonts/raleway_thin-webfont.svg');
    ...
}

But an absolute url is also perfectly fine (also not advised). So http://www.yoursite/assets/css/fonts/raleway_thin-webfont.svg should work as well.

CSS relative path in @font-face

The problem's solution of the problem is to edit the browserSync settings (baseDir).

Thanks

Webpack Import Including Font Face with Relative Path

To solve this issue, it's only necessary to use the resolve-url-loader:

https://github.com/bholloway/resolve-url-loader

Keep in mind that it's currently necessary to have sourceMap enabled on any previous loader. It's just that easy.

Webpack @font-face relative path issue

There is no particular reason for using relative paths in webpack. You can use webpack aliases to get rid of this necessity. Properly used aliases can resolve a lot of issues, including this one. Just specify an alias for your css and fonts directory:

resolve: {
  alias: {
    styles: path.resolve(__dirname, 'public/src'),
    fonts: path.resolve(__dirname, 'public/fonts')
  }
}

and then, import the modules using aliases:

import '~styles/fonts.less';
import '~styles/main.less';

and in your font face:

src: url('~fonts/Montserrat/Montserrat-Regular.eot');

I personally tend to avoid using relative paths in my webpack-built projects. The reason is that it is much more cleaner and readable, it prevents from problems that may arise with mixing the relative paths in different places that are dependent on each other. As a result, you have a central place where you define your paths and let the webpack resolve the relative paths for you.

Font-Face use absolute path

First of all that's relative path and not absolute path, absolute path means using like http://whatever.com/fonts/font_file.woff and secondly it doesn't work because you have a folder called font where as you are using ../fonts/.

Also, I see that file names do not match, you have a file called Monton.woff but you are using Monoton-Regular-webfont.woff, you need to change the file names accordingly and use the snippet below

@font-face {
    font-family: Monoton;
    src: url('../font/Monoton-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

You can also use these fonts directly from google by including the below snippet in your stylesheet

Demo

@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}