JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <title>Univers Rendering Test</title>

    <body>
        <p id="univers55">Univers 55 Q</p>
        <p id="univers55bold">Univers 55 bold Q</p>
        <p id="univers45">Univers 45 Q</p>
        <p id="univers45bold">Univers 45 bold Q</p>
        <p id="univers55">Font-face Univers 55</p>
        <p id="univers55bold">Font-face Univers 55 bold</p>
        <p id="univers45">Font-face Univers 45</p>
        <p id="univers45bold">Font-face Univers 45 bold</p>
        <p id="univers55-nff">Non-Font-face Univers 55</p>
        <p id="univers55bold-nff">Non-Font-face Univers 55 bold</p>
        <p id="univers45-nff">Non-Font-face Univers 45</p>
        <p id="univers45bold-nff">Non-Font-face Univers 45 bold</p>
    </body>
</html>

CSS

@font-face {
            font-family: MyUnivers55;
            src: local('Univers 55');
            font-weight:normal;
        }
        @font-face {
            font-family: MyUnivers45;
            src: local('Univers 45 Light');
            font-weight:normal;
        } 

        #univers55, #univers55bold, #univers45, #univers45bold,
        #univers55-nff, #univers55bold-nff, #univers45-nff, #univers45bold-nff { font-size:3em;}
        #univers55 { font-family:MyUnivers55, serif; }
        #univers55bold { font-family: MyUnivers55, serif; font-weight:bold; }
        #univers45 { font-family: MyUnivers45, serif; }
        #univers45bold { font-family: MyUnivers45, serif; font-weight:bold; }
        
        #univers55-nff { font-family: "Univers 55", serif; }
        #univers55bold-nff { font-family: "Univers 55", serif; font-weight:bold; }
        #univers45-nff { font-family: "Univers 45 Light", serif; }
        #univers45bold-nff { font-family: "Univers 45 Light", serif; font-weight:bold; }