JSFiddle - React, Tailwind, and code Playground

HTML

<div id="original"><font face="Georgia" size="14" color="#000000">Reference <b>sample</b> <i>markup</i> with <u>underline</u> tags and font attributes.</font>
</div>

<div id="intendedResult"><span style="font-size: 14px; color: #cc0000;" class="newFont">Intended <b>sample</b> <i>markup</i> with <u>underline</u> tags and font attributes.</span>
</div>

<div id="convertMe"><font face="Georgia" size="14" color="#000000">Converted <b>sample</b> <i>markup</i> with <u>underline</u> tags and font attributes.</font>
</div>

CSS

.newFont {
    font-family:"Lucida Console", Monaco, monospace;
    text-decoration: none;
}

JavaScript

function convert(targetEl) {
    try {

        if (targetEl) {

            $(targetEl).find('font').replaceWith(function () {

                var replaceEl = $('<span>').append($(this).contents());

                if (this.hasOwnProperty('size') && this.size !== "") {
                    $(replaceEl).css('font-size', this.size + 'px');
                }

                if (this.hasOwnProperty('face') && this.face !== "") {
                    $(replaceEl).addClass('newFont');
                }

                if (this.hasOwnProperty('color') && this.color !== "") {
                    $(replaceEl).css('color', '#cc0000');
                }
                
                return replaceEl;
            });

        }

    } catch (e) {
        alert(e.message);
    }
}

var el = $("#convertMe");
convert(el);