0

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'..

Darkkz
  • 384
  • 4
  • 21
  • Read here: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Turnip Nov 11 '13 at 14:38
  • 1
    You only have one file type for that font. You need to have al the file types for it to work. Here is this website that can make all of the file types for you, http://www.fontsquirrel.com/. – Josh Powell Nov 11 '13 at 14:38
  • 1
    Check the path, i.e. `url('../fonts/gnuolane.ttf')` vs `url('/fonts/gnuolane.ttf')` – j08691 Nov 11 '13 at 14:41
  • 3
    Where is.eot,.woff,.svg, .ttf file's..? – Vivek Vikranth Nov 11 '13 at 14:42
  • i generated the files from fontsquirell.com. Check the initial post. – Darkkz Nov 11 '13 at 14:56
  • 1
    The font squirrel code should work, assuming the paths are correct. You might need to make sure your server is sending font files down with the correct MIME type, e.g. `.eot` files need to be `application/x-font-opentype`. See http://somethinginteractive.com/blog/2012/06/04/proper-mime-types-for-embedded-font-face-fonts/ for more. – Olly Hodgson Nov 11 '13 at 15:05

2 Answers2

3

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;
}
Mike Barwick
  • 6,288
  • 6
  • 51
  • 76
0

try this

@font-face {
    src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
Prakash R
  • 409
  • 2
  • 14