0

I have a simple html/css layout using a custom font via @font-face:

@font-face {
    font-family: 'Gotham-Medium';
    src: url('../Font/Gotham-Medium.eot');
    src: url('../Font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
         url('../Font/Gotham-Medium.ttf') format('truetype'),
         url('../Font/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

All browsers including IE6 load the font correctly - but I get a warning in Safari (5.0.4).

Resource interpreted as font but transferred with MIME type application/octet-stream.

Funny fact is that on Windows/Safari font displays ok (.ttf file) but shows warning, but on Mac/Safari the font displays as transparent/invisible - showing no text at all (.ttf font file does load + warning message also comes up in console).

Any ideas?

easwee
  • 15,757
  • 24
  • 60
  • 83
  • Have you used font squirrel? http://www.fontsquirrel.com/ – Dan Blows Feb 13 '12 at 13:23
  • @Blowski - yes I did. The font-face syntax should be all correct - I just removed woff format since I do not need to support that and Safari does not use it anyway. – easwee Feb 13 '12 at 13:29
  • Maybe this will help: http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts – Dan Blows Feb 13 '12 at 13:50
  • 1
    If you're embedding Gotham you are breaking H&FJ's license since no one currently has permission to embed their fonts. – Sam Soffes Aug 22 '12 at 08:51

1 Answers1

0

When your browser ask web-server for font file the webserver replies with header information and file contents. And it seems that web-server gives .ttf file with mime-type application/octet-stream. Browser can expect some special mime type for font, like application/x-font-ttf You can use AddType application/x-font-ttf .ttf in apache configuration to specify mime type.

Btw, you have 2 src sections in your @font-face. Probably you should combine them into one separating each source with comma.

Sergey P. aka azure
  • 3,993
  • 1
  • 29
  • 23
  • The font-face declaration is ok since it is generated by fontsquirel generator - I wouldn't doubt that is causing the problem. Will try with mime type – easwee Feb 13 '12 at 13:25