JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fabricjs.com/build/files/text,cufon,gestures,easing,parser,freedrawing,interaction,serialization,image_filters,gradient,pattern,shadow,node.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<canvas id="c" height="200px" width="400px"></canvas>

JavaScript

WebFontConfig = {
    google: { families: [ 'Ribeye::latin', 'Lora::latin', 'Croissant+One::latin', 'Emblema+One::latin', 'Graduate::latin', 'Hammersmith+One::latin', 'Oswald::latin', 'Oxygen::latin', 'Krona+One::latin', 'Indie+Flower::latin', 'Courgette::latin', 'Ranchers::latin' ] }
  };

(function() {
    var src = ('https:' === document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    
    $.getScript(src, function(data) {      
        canvas.renderAll();
        canvas.renderAll();
    });
})();

$(document).ready(function(){
    canvas = new fabric.Canvas('c'); 
    var text = new fabric.Text("Web Font Example", {
        left: 200,
        top: 30,
        fontFamily: 'Ranchers',
        fill: '#000',
        fontSize: 60
    });
    
    canvas.add(text);
});