CODEWITHSUNDEEP
cssfont-face
Andi
Andi

Reputation: 939

@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?

Upvotes: 0

Views: 1227

Answers (4)

Arshid KV
Arshid KV

Reputation: 10037

Please check 

@font-face {
    font-family: 'sofia';
    src: url('/css/fonts/sofiaprolight-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 0

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

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

Upvotes: 1

Arshid KV
Arshid KV

Reputation: 10037

Just try /css/fonts/... 

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

Upvotes: 0

Jignesh M. Khatri
Jignesh M. Khatri

Reputation: 1606

You can try the below one, because your font/s are in fonts folder and that folder is in css folder. So provide full path and try.

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

}

Upvotes: 0

Related Questions