title: Injecting CSS rules into the page in Android Browser
body: <p>I'm writing a JavaScript to inject a new CSS rule into pages in Android browser in order to display some text in a custom CSS font (after some replacement).</p>
  
  <p>Here is how I tried to inject the CSS rule:</p>
  
  <pre><code>var css = '@font-face {font-family:"font"; src:url(http://www.example.com/font.ttf);} si{font-family:"font"}';
  if(document.getElementsByTagName("style")[0]){
     var style = document.getElementsByTagName("style")[0];
  } else {
     var style = document.createElement("style");
     style.type = "text/css";
     document.getElementsByTagName("HEAD")[0].appendChild(style);
  }
  var sheet = style.sheet;
  sheet.insertRule(css, sheet.cssRules.length);
  </code></pre>
  
  <p>Then the text is replaced using a JavaScript XPath implementation. Replacing lines are in this model:</p>
  
  <pre><code>text = text.replace(/\'/g, "&lt;si&gt;♥&lt;/si&gt;");
  </code></pre>
  
  <p>The text replacement happens perfectly. But the injecting CSS rule part is not working. The replaced text is just shown as <code>&lt;si&gt;♥&lt;/si&gt;</code> (with tags also printed).  :(</p>
  
  <p>Can anyone please correct my code of injecting CSS rule or please suggest some other way to do this.</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update: I'm emulating this in Android 2.2 which supports CSS fonts.</strong></p>