title: font-face not working on all browsers
body: <p>I tried to use face-font to add a couple of fonts to my page but unfortunately, even if I followed the instructions to make it compatible with browsers, it only works on Chrome and Safari and I can't work out why. I tried two different methods. </p>
  
  <p>The first one looks like this:</p>
  
  <pre><code>@font-face {
    font-family: 'robotoblack';
    src: url('roboto-black-webfont.eot'); /* per IE 5-8 */
    src: local('☺'), /* direttiva local per IE */
    url('roboto-black-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
          url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */
  }
  
  @font-face {
    font-family: 'robotomedium_italic';
    src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */
    src: local('☺'), /* direttiva local per IE */
    url('roboto-mediumitalic-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
          url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */
  }
  </code></pre>
  
  <p>and the second one like this:</p>
  
  <pre><code>@font-face {
    font-family: 'robotoblack';
    src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */
    src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('roboto-black-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */
  }
  
  @font-face {
    font-family: 'robotomedium_italic';
    src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */
    src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('roboto-mediumitalic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>Could you please tell me which of the two methods is the best one? Any suggestion to make it work on all browsers?</p>
  
  <p>In case you want to see the example, it is available here:</p>
  
  <p><a href="http://www.enricotrevisan.eu/prova/sandro.html" rel="nofollow">enter link description here</a></p>
  
  <p>I hope you can help! Thanks in advance</p>
  
  <p>Cheers</p>
  
  <p>Enrico</p>