title: Using dom to create @font-face with style tag isn't working properly?
body: <p>I'm trying to initialize a <code>style</code> tag using the DOM with JavaScript and for some reason the code below doesn't want to work. Basically I have a <code>div</code> for a container (it's the id) and I want the <code>p</code> tag to display text on the <code>div</code>. So far I have this.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt; 
  &lt;style&gt;
  body
  {      
      background-color: black;    
  }
  #container
  {       
      position: relative; 
      margin: 0 auto;     
      height: 100%;
      width: 100%;
      z-index: 1;
  }
  #p_1
  {
      font-family: my_custom; 
      font-size: 50px;   
      color: red;
      z-index: 2;
  }
  &lt;/style&gt;
  &lt;script language = "JavaScript"&gt;
  function initialize_font()
  {
      var special_font = document.createElement("style");
      special_font.type = "text/css"; 
      document.body.insertBefore( special_font, container);
      special_font.styleSheet.cssText = "@font-face {" + font-family: my_custom;  src: url('my_custom.TTF'); + "}";   
  }
  &lt;/script&gt;
  &lt;body onload = "initialize_font()"&gt;
      &lt;div id = "container"&gt;                      
         &lt;p id = "p_1"&gt;hello&lt;/p&gt;
      &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>