JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>

CSS

/* latin */
@font-face {
  font-family: 'メイリオ';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url(http://fonts.gstatic.com/s/fredokaone/v4/SL0aFUFfkFMMdariYQ3_YYgp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

JavaScript

var c = new fabric.Canvas('canvas');
var text = new fabric.IText('Hello world !', {
    fontFamily: 'メイリオ',
    top: 100,
    left: 100,
    fontSize: 20
});
setTimeout(function() {
    c.add(text);
}, 1000);