JSFiddle - React, Tailwind, and code Playground

by PavelKozlov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<select id="fontsDropdown">
    <option value=''></option>
    <option value="slabThing">SlabThing</option>
    <option value="therainmaker">Therainmaker</option>
</select>

CSS

canvas {
    border: 1px solid #999;
}
.canvas-container {
    float: left;
    margin-right: 6px;
}

JavaScript

var fontsList = {
    'slabThing': {
        fontFamily: 'SlabThing Thing',
        file: 'https://m.greetz.nl/service/api/font/1139325180/SlabThing.ttf'
    },
    'therainmaker': {
        fontFamily: 'Theainmaker Regular',
        file: 'https://m.greetz.nl/service/api/font/1139325186/TheRainmaker.ttf'
    }
};

var canvas = new fabric.Canvas('c');
var text = new fabric.Text("Hello World!", {left:50, top:50})
canvas.add(text);

document.getElementById('fontsDropdown').addEventListener('change', onFontChanged);

function onFontChanged(event) {
  var font = fontsList[event.target.value];
  if (!font) {
      return;
  }
  
  loadFont(font)
      .then(function(fontFamily) {
          console.log(fontFamily, 'has been loaded.');
          text.setFontFamily(fontFamily);
          canvas.renderAll();
      })
      .catch(console.error)
}

function loadFont(font) {
    return new Promise((resolve, reject) => {
        var fontFamily = font.fontFamily;
        addFontToMarkup(font);

        WebFont.load({
            custom: {
                families: [
                    fontFamily + ':n4'
                ]
            },
            active: () => {
                resolve(fontFamily);
            },
            inactive: () => reject(fontFamily),
            classes: false
        });
    });
}

function addFontToMarkup(font) {
    var fontFamily = font.fontFamily;
    var style = document.createElement('style');
    style.setAttribute('type', 'text/css');

    style.innerHTML = `@font-face {
            font-family: '${fontFamily}';
            font-style: normal;
            font-weight: normal;
            src: url('${font.file}');
        }`;
    document.body.appendChild(style);
}