title: @font-face not working in mobile Webkit
body: <p>I'm having trouble getting <code>@font-face</code> to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android.</p>
  
  <p>It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.</p>
  
  <p>The fonts and CSS are from FontSquirrel:</p>
  
  <pre><code>@font-face {
      font-family: 'LeagueGothicRegular';
      src: url('../fonts/League_Gothic-webfont.eot');
      src: local('☺'),
          url('../fonts/League_Gothic-webfont.woff') format('woff'),
          url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
          url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'LatinModernRoman10Bold';
      src: url('../fonts/lmroman10-bold-webfont.eot');
      src: local('☺'),
          url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
          url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
          url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'LatinModernRoman10BoldItalic';
      src: url('../fonts/lmroman10-bolditalic-webfont.eot');
      src: local('☺'),
          url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
          url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
          url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>I've checked the SVG ID in the SVG font source, and they all match up.</p>
  
  <p>Could it be because I've got some letter-spacing rules later on in the CSS?</p>
  
  <p>Thanks!</p>