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>
<link href='http://fonts.googleapis.com/css?family=Ranchers' rel='stylesheet' type='text/css'>
<canvas id="c" height="200px" width="400px"></canvas>

JavaScript

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);