Regrettably, the solution won't be effective due to the unconventional font being used – as previously mentioned in detail.
To achieve the desired appearance, design the text banner you desire using an image editor (such as Photoshop) and save it as a ".png" file, ensuring transparency is maintained (the specific command may vary in Photoshop compared to other software). To reduce file size, position the image frame bars as closely around the font as possible (as the coverage of a ".png" image increases, so does the file size exponentially [squared], including clear space).
The only task remaining would be adjusting the placement of the text banner within the div element (float, padding, margin, etc.).
I understand this may not be the ideal solution you were hoping for, but it is effective – eliminating the need for contingency code for various browsers, script blockers, etc. (although coding must still account for those who block images and adhere to accessibility standards, I personally find it more efficient and streamlined than writing contingency code for different fonts within your designated family).
At least one aspect of your page will remain consistent across nearly all web browsers.