title: @font-face - how to make it work on all browsers
body: <blockquote>
    <p>The @font-face rule is supported in Internet Explorer 9, Firefox,
    Opera, Chrome, and Safari.</p>
    
    <p>However, Internet Explorer 9 only supports .eot type fonts, while
    Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.</p>
    
    <p>Note: Internet Explorer 8 and earlier versions, do not support the
    @font-face rule.</p>
  </blockquote>
  
  <p>This text is from <a href="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" rel="nofollow">here</a>. So in order to have working @font-face for IE9 I should just specify EOT font file:</p>
  
  <pre><code>@font-face
  {
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
  }
  </code></pre>
  
  <p>Particularly I am using Myriad Pro, and I have OTF fonts. How I can convert them into EOT type?</p>
  
  <p>And regarding to IE7 and IE8 what trick/hack should be used to obtain the desired result? </p>