Search code examples
cssfont-face

@font-face or path issue

I've got a problem with my @font-face declaration. It works fine for the root folder, but isn't working for html files in subfolders. In the root I'm calling my css file with

<link href="css/fonts.css" rel="stylesheet" type="text/css">

and in the subfolders with

<link href="../css/fonts.css" rel="stylesheet" type="text/css">

which is working fine, as the other css declarations are working in the subfolder. But my @font-face declaration

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

is only working in the root. Folder structure is like this

index.html
css
  fonts.css
  fonts
    sofiaporlight-webfont.eot
de
  second.html

Am I missing something?

Solution

  • you have to change "security.fileuri.strict_origin_policy" to false in the about:config settings

    Firefox Security Policy

    "Local documents have access to other local documents in the same directory and in subdirectories, but not directory listings. (Default) "

    Orginal Answer

    This can cause the error,try to change firefox config as mentioned, if you are working on remote host, you need edit htaccess