title: Displaying Amharic text correctly in browsers
body: <p>I failed to display Amharic language in my website ,i used @font-face in css properties file linked in the main header (dynamic) ,added also font-family to each class where i added amharic language ,but i see only that only text style is rendered but the characters are not changing and displays strange chracters like(በ አማርኛ ለመጻፍ የሚያስችል ኪ ቦርድ)
  The problem is when i install the same font under windows ,it shows properly in all browsers.
  So how can i substitute and make the website rely on the font i want to display.</p>
  
  <p>Please provide me with good solution. this website is displaying amharic using javascript and something else :</p>
  
  <pre><code>&lt;script src="http://www.abugidainfo.com/amharic/wp-includes/js/handleamharic.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><a href="http://www.abugidainfo.com/amharic/" rel="nofollow">http://www.abugidainfo.com/amharic/</a> =this is the url that display amharic (/amharic/)</p>
  
  <p>what i must use to display amharic in my website too?
  Thanks in advance.i hope somebody can come up with a good fix.Thanks again.</p>
  
  <p>CSS/ (just few first lines)</p>
  
  <pre><code>@font-face {
      font-family: 'abyssinica_silregular';
      src: url('abyssinicasil-r.eot');
      src: url('abyssinicasil-r.eot?#iefix') format('embedded-opentype'),
           url('abyssinicasil-r.woff') format('woff'),
           url('abyssinicasil-r.ttf') format('truetype'),
           url('abyssinicasil-r.svg#abyssinica_silregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  /*-----------------------------------------------------------------------------------*/
  /*  1.  Document Setup (body, common classes, structure etc)
  /*-----------------------------------------------------------------------------------*/
  html, body {
      height: 100%;
      -webkit-font-smoothing: antialiased;
  }
  body {
      margin: 0 auto;
      background-color: #fbfbfb;
      font-size: 13px;
      line-height: 18px;
      /*font: 100%/1.618 sans-serif;*/
  }
  a {
      color:#6e757b;
      -webkit-transition: color 100ms ease-in 0ms;
      -moz-transition: color 100ms ease-in 0ms;
      -o-transition: color 100ms ease-in 0ms;
      transition: color 100ms ease-in 0ms;
  }
  a:hover {
      color:#6b7278; /*008fd5;*/ 
  }
  h1, h2, h3, h4, h5 {
      color: #444;
  }
  h1 {
      font-size: 28px;
  }
  h2 {
      font-size: 26px;
  }
  h1, h2 {
      font-weight: normal;
  }
  #primary h1, #primary h2 {
      font-size: 20px;
      font-family: "Open Sans", Arial, Verdana;
      font-weight: normal;
  }
  #primary h2 {
      /*
      text-transform: uppercase;
      font-size: 16px;
      letter-spacing: -0.05em;
      color: #777;
  */
      color: #999999;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.045em;
      text-transform: uppercase;
      line-height: 2.3em;
  }
  #primary h1.entry-title {
      line-height: 1.3em;
      letter-spacing: -1px;
      font-size: 28px;
      font-weight: bold;
      padding: 0;
      margin: 0;
  }
  h1.site-title {
      font-size: 1.71429rem;
      font-family: "Open Sans", Verdana, Geneva, sans-serif;
      font-weight: 600;
      letter-spacing: -0.045em;
      display: inline-block;
      color: #F96;
  }
  h1.site-title a {
      color: #080809;
      text-decoration: none;
      font-size: 36px;
      font-style: normal;
      line-height: normal;
      font-weight: 300;
      text-transform: none;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  h1.site-title a:hover {
      color: #CCCCCC;
  }
  h1.page-title {
      padding:0;
      margin: 0;
      line-height: 1.1;
      font-size: 28px;
      font-weight: normal;
  }
  h1.compact {
      letter-spacing: -1px;
      font-weight: normal;
      max-width: 70%; 
  }
  h2.entry-title {
      color: #5d7898;
      font-weight: 100;
      font-size: 24px;
  }
  p {
      font-size: 14px;
      line-height: 1.714285714;
  }
  #preroll_placeholder,
  #Playerholder,
  object,
  embed,
  iframe {
      width: 100%;
      margin: 0;
      padding:0; /*0 0 20px 0*/
  }
  </code></pre>