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>
<canvas id="c" height="200px" width="400px"></canvas>
CSS
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'), local('JollyLodger'), url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
JavaScript
canvas = new fabric.Canvas('c');
var text = new fabric.Text("Web Font Example", {
left: 200,
top: 30,
fontFamily: 'Jolly Lodger',
fill: '#000',
fontSize: 60
});
canvas.add(text);
canvas.renderAll