title: @font-face - problems with diacritic
body: <p>I have a problem with CSS3 property for using my own fonts @font-face. In Chrome, Safari and IE10 browsers aren't any problems, but in other browsers there are several problems:</p>
  
  <p>I used this code: (fonts Gabriola a monotype - same code for both) </p>
  
  <pre><code>@font-face {
      font-family: "Gabriola";
      src: url("../fonts/Gabriola.eot?") format("eot"),
           url("../fonts/Gabriola.woff") format("woff"),
           url("../fonts/Gabriola.ttf") format("truetype"),
           url("../fonts/Gabriola.svg#Gabriola") format("svg");
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>In Google Chrome everything is OK: <a href="http://www.webpagescreenshot.info/img/933395-242012123728PM" rel="nofollow">Screen</a></p>
  
  <p>Firefox replace letters with diacritic with an other font - <a href="http://imageshack.us/photo/my-images/408/firefoxo.png/" rel="nofollow">Screen</a> </p>
  
  <p>Opera one of the included fonts doesn't display at all and the in the text with second one skip the letters with diacritic: <a href="http://imageshack.us/photo/my-images/577/operas.png/" rel="nofollow">Screen</a> </p>
  
  <p>In the new IE10 there's everything ok and the older ones (IE9 and IE8) are behaving like Firefox.</p>
  
  <p>How can I repair this? Or at least replace the font-family in the problematic browsers with some universal font (like Arial, ...) and change the font-size property. For IE there are good hacks but how about Opera and Firefox?</p>
  
  <p>Thank you!</p>