title: CSS3 @font-face not displaying on Mac OS X Safari 5.x OR Chrome
body: <p>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.</p>
  
  <p>The current situation is, I am using...</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>And the resulting page displays as so...</p>
  
  <p>*Windows OS - Works on all browsers (Chrome, Firefox, IE)</p>
  
  <p>*Apple Mac OS X - Works on Firefox and Safari 6.x but NOT on Chrome or Safari 5.x</p>
  
  <p>*Apple iOS iPhone and iPad - Works fine</p>
  
  <p>I'd appreciate any guidance on this matter.</p>
  
  <p>If you want to see it for yourself have a look at <a href="http://gradtouch.com/test" rel="nofollow">http://gradtouch.com/test</a> </p>
  
  <p>I'm just so confused as to why it won't work. Thanks in advance.</p>