Please check this out, my friend Gerben just uploaded his 5th free font

Find them over here: FontStruct | gspace | FontStructions. To demo one of them, the 'Klonk Narrow' I used fontsquirel to construct me the different webfonts and the css.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

There is no lower case yet, but he is working on it...

Update

And to celebrate all of these design skills, Gerben has just joined us at Front end heroes. Go and check out his profile...

I recently started using @font-face in a major website. The time has come to free ourselves from the shackles of the webfonts. I got the chance to host the fonts on a amazon s3 cloudfront instance. Really fast and with the 'bullet-proof @font-face' solution of Paul Irish I decided to give it a go.

So I started testing and everything looked very promising, even the FOUT wasn't too bad. But when we got around to implementing it in the real templates for the site, my esteemed colleague Maarten found a flaw.

It seems that the .otf file that we use isn't being read properly in Firefox, but instead gives a weird error.

Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf 

Safari uses the same .otf file and displays it properly. But with this CSS:

@font-face { 
  font-family:'FrescoStdNormalRegular';
  src: url('http://wnas.nl/fonts/FrescoStd-Normal.eot');
  src: local('no local - Fresco Std Normal Regular'),local('no local-FrescoStd-Normal'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.woff') 
    format('woff'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.otf') 
    format('opentype'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.svg#FrescoStd-Normal') 
    format('svg'); 
}
#test{
	font-family:FrescoStdNormalRegular,courier;
}

FrescoStdNormalRegular,courier;

Firefox, as you can see, just doesn't render the font, can anyone help me and point out what I am doing wrong? Please let me know in the comments...

Update

It seems that this does work on my website, but not locally... Here is a test page where I get two different responses from firefox 3.5.7 on os X 10.6.2.

• on the Imac it says : The resource from this URL is not text: http://wnas.nl/fonts/FrescoStd-Normal.otf
• And the macbook pro says: Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf

Get the source from here and let me know what happens on your machines through the comments or twitter.

#WIN

Thanks to Jeroen who at least does some research, before asking the rest to help, we have a cause and a solution. On the mozzilla page about font-face it states:

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site.

So you should set this in your .htaccess file and you're right as rain.

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Thanks everybody for helping, I hope someone else benefits from this as well. I just learned something new, the main reason I really like my job!

Sure, I have heard about font-smoothing and how not having it, really screws up your rendering. But hearing it and seeing it on your own xp installation is a different thing. I just saw this on my machine and I just had to share it with you.

• Safari on OS-X has the best rendering in my opinion

  

• Rendering the default font, instead of just showing white is better in Firefox 3.5

  

• Even IE 7 does quite a decent job.

  

• As allways, IE 6 screws up bigtime

  

But hey, screw IE6 I say. Not really, just go and check out this possible solution. I am just now testing it and would like to know what you use or prefer..