Search code examples
htmlcssfont-face

Font-face not working on Windows version of browsers

I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:

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

The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.

This is the website.

And this is how it is supposed to look like, when font-face is working correctly:

enter image description here

Thanks

LE: I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'

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

Still not working tho'..

Solution

  • Move all your font files (the actual fonts I mean) to the same folder as your CSS file... Then use this block of CSS. Tell me if it works. I sense it's a path issue...

    @font-face {
    font-family: 'gnuolane';
    src: url('gnuolane_rg-webfont.eot');
    src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
    url('gnuolane_rg-webfont.woff') format('woff'),
    url('gnuolane_rg-webfont.ttf') format('truetype'),
    url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}