Elena Stoean Elena Stoean - 3 months ago 25
CSS Question

Path for css font face

So this is the path of my fonts: project->assets->css->fonts, and in the fonts folder are my font files. I've tried this way:

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


But I really sucks at paths. Sorry if this is really stupid, but I really can't understand them

Answer

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.