JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<select name="font-list" id="font-list">
    <option>Black Han Sans</option>
    <option>Fontaas</option>
    <option>Damion</option>
    <option>Dynalight</option>
    <option>Caudex</option>
    <option>Comfortaa</option>
    <option>Esteban</option>
</select>
<canvas id="c" width="700" height="500"></canvas>
<br />

JavaScript

$(document).ready(function () {
    var font = 'Black Han Sans'
    $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + font + '">')
    
    var canvas = new fabric.Canvas("c");
    canvas.backgroundColor = 'gray';
    document.getElementById("c").fabric = canvas;

    text = new fabric.Text('Google Fonts!!', {
        left: 200,
        top: 200,
        fill: 'white',
    })
    canvas.setActiveObject(text)
    var activeObject = canvas.getActiveObject();
    text.set({
        fontFamily: font,
        useNative: true
    });

    var length = text.width + 1

    textbox = new fabric.Textbox('Google Fonts!!', {
        left: 200,
        top: 200,
        width: 300,
        fill: 'white',
    })
    canvas.add(textbox);

    canvas.setActiveObject(textbox)
    
    activeObject = canvas.getActiveObject();
    activeObject.set({
        fontFamily: font,
        useNative: true
    });

    console.log(textbox.fontFamily)
    canvas.renderAll();

    $("#font-list").change(function () {

        var font = $(this).val()
        $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + font + '">')

        setTimeout(function(){
       // var canvas = document.getElementById("c").fabric;
        var activeObject = canvas.getActiveObject();
        activeObject.set({
            fontFamily: font,
            useNative: true
        });
        console.log(activeObject.fontFamily)
        canvas.renderAll();},500);
     })

});