title: Allowing the <font> tag to override CSS?
body: <p>I have some user generated content I'm trying to render on my site. The rich text box editor I'm using renders font changes using <code>&lt;font /&gt;</code> tags, which are overridden by CSS on the page.</p>
  
  <p>Does anyone know if there is a way to allow rules defined using the <code>&lt;font /&gt;</code> tag to show through?</p>
  
  <p><strong>UPDATE</strong><br>
  Since changing the control I'm using for my rich text editor is not an option and my users have no knowledge of HTML to understand the difference between a <code>&lt;font&gt;</code> tag and any other type of tag, I had no choice but to create a hack to fix my problem. Below is the code I used to solve it. It's a jQuery script that changes all <code>&lt;font /&gt;</code> tag attributes into inline CSS.  </p>
  
  <pre><code>(function() {
      $('font[size]').each(function() {
          var fontSize = this.size;
          if (fontSize == 1) {
              $(this).css("font-size", 8);
          } else if (fontSize == 2) {
              $(this).css("font-size", 9);
          } else if (fontSize == 3) {
              $(this).css("font-size", 11);
          } else if (fontSize == 4) {
              $(this).css("font-size", 15);
          } else if (fontSize == 5) {
              $(this).css("font-size", 20);
          } else if (fontSize == 6) {
              $(this).css("font-size", 25);
          }
      });
      $('font[face]').each(function() {
          $(this).css('font-family', this.face);
      });
      $('font[color]').each(function() {
          $(this).css('color', this.color);
      });
  })();
  </code></pre>