title: Merge more fonts elements into one
body: <p>so I have this piece of html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;FONT COLOR="#c0504d"&gt;&lt;FONT FACE="Verdana, sans-serif"&gt;&lt;FONT SIZE=6 STYLE="font-size: 22pt"&gt;John
  Smith&lt;/FONT&gt;&lt;/FONT&gt;&lt;/FONT&gt;</code></pre>
  </div>
  </div>
  
  I was wondering if I could merge all 3 fonts into one so the result looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;FONT SIZE=6 STYLE="font-size: 22pt" FACE="Verdana, sans-serif" COLOR="#c0504d"&gt;John
  Smith&lt;/FONT&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I intend to do it with php, but any other solutions are welcomed</p>