title: Cross browser @font-face use
body: <p>I've been having a lot of difficulties with using custom fonts and <code>@font-face</code>. I'm trying to get a font consistent across the latest versions of Chrome, Safari &amp; Firefox (shown in that order in the screenshot below:</p>
  
  <p><img src="https://i.stack.imgur.com/gboTb.png" alt="enter image description here"></p>
  
  <p>I'm using the following to generate this:</p>
  
  <pre><code>@font-face {
      font-family: 'dineng';
      src: url('fonts/dineng.eot');
      src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'),
           url('fonts/dineng.woff') format('woff'),
           url('fonts/dineng.ttf') format('truetype'),
           url('fonts/dineng.svg#dineng') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>.menu-button a {
      height:25px;
      float:left;
      border-bottom:2px solid white;  
      color:#ccccff;
      text-decoration:none;
      padding:8px 21px 0px 20px;
      text-align:center!IMPORTANT;
      background-color:#00378f;
      font-size:18px;
      font-family:'dineng', Arial;
      text-shadow:0 0 1px rgba(0,0,0,0.3);
      }
  </code></pre>
  
  <p>I've tried <strong>all manor of font-weight's to decrease the weight</strong> but nothing effects them. I did use the CSS3 hack below on Chrome to get it to look like my PSD but that doesn't work across the other browsers:</p>
  
  <pre><code>text-shadow:0 0 1px rgba(0,0,0,0.3);
  </code></pre>
  
  <p>Does anyone have any suggestions before I jump out the window!!</p>
  
  <p><strong>PLEASE NOTE THAT I'M UNABLE TO USE FONT SQUIRREL!</strong></p>