Search code examples
htmlcssfontsfont-face

@font-face doesn't work online

I've got a problem with fonts, exactly with "@font-face". When i tried to run this local HTML page, all fonts worked, but now when i try to run online HTML page, only one font is working.

now i have two fonts, one work, and one other doesn't

CSS :

@font-face {
    font-family: 'RemachineScript';
    src: url(fonts/SCRIPTIN.ttf);
}

@font-face {
    font-family: 'Quicksand';
    src: url(fonts/Quicksand.otf);
}

header#subheader div.title {
    font-family: 'RemachineScript';
}

header#subheader p.subheader {
    font-family: 'Quicksand';
}

You can see the HTML at http://gspinaci.com/

The URLs are right, because they are in the same folder. What can I do?

Solution

  • The console says there is no Quicksand.otf file, be sure of two things, first, that the file is there and the name is exactly the same (case sensitive) and the second this is that your font-face call is very specific, use the webkit font that you can download from font squirrel here: http://www.fontsquirrel.com/fonts/Quicksand

    and be sure to paste in you CSS file the WHOLE font-face call, like this:

    @font-face {
 font-family: 'triplex';
 src: url('fonts/triplexsans-light-webfont.eot');
src: url('fonts/triplexsans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/triplexsans-light-webfont.woff') format('woff'),
     url('fonts/triplexsans-light-webfont.ttf') format('truetype'),
     url('fonts/triplexsans-light-webfont.svg#triplexlight') format('svg');
font-weight: normal;
font-style: normal;
}

    And remember to include all font format files, not only .otf.

    EDIT

    You do not need to configure your server, you only need to modify your .htaccess file, add this lines to it:

    AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff