CSS3 @font-face not displaying on Mac OS X Safari 5.x OR Chrome

Question

Hi guys having a bit of a dilemna with @Font-Face and can't figure out why. I have done countless hours of research on the best @font-face code to use and troubleshooting as to why it would not display on a Mac OS X browser.

The current situation is, I am using...

@font-face {
font-family: 'Avenir LT 55 Roman';
src: url('fonts/avenir-55.eot?#iefix') format('embedded-opentype'), 
     url('fonts/avenir-55.woff') format('woff'), 
     url('fonts/avenir-55.ttf')  format('truetype'),
     url('fonts/avenir-55.svg#AvenirLT-Roman') format('svg');
     font-weight: normal;
     font-style: normal;
}

And the resulting page displays as so...

*Windows OS - Works on all browsers (Chrome, Firefox, IE)

*Apple Mac OS X - Works on Firefox and Safari 6.x but NOT on Chrome or Safari 5.x

*Apple iOS iPhone and iPad - Works fine

I'd appreciate any guidance on this matter.

If you want to see it for yourself have a look at http://gradtouch.com/test

I'm just so confused as to why it won't work. Thanks in advance.

Answer 1

The problem is with your ttf file (it's corrupted - it seems like the baseline is altered in a way that the font appears heavily cropped) and that is why you get this behavior. Browsers that serve the other formats (eot, woff, svg) work nice but when a browser choses to serve the ttf you get a blank page (although technically there isnt any error). Fix your file and you'll be good to go.

This is your woff file:

And this is your ttf file: