Font preloading

by vijayweb

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
<canvas id="c" width="600" height="300"></canvas>
<br />Font-family: <select id="font-family"></select>

CSS

@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata');

canvas {
    border: 1px solid #999;
}

JavaScript

// Define an array with all fonts
var fonts = ["Pacifico", "VT323", "Quicksand", "Inconsolata"];

// Load all fonts using Font Face Observer
Promise.all(
  fonts.map(font => new FontFaceObserver(font).load())
).then(function() {
  
  // When all fonts are loaded, initialize the fabric canvas
  var canvas = new fabric.Canvas('c');
  
  // Populate the fontFamily select
  var select = document.getElementById("font-family");
  fonts.forEach(function(font) {
    var option = document.createElement('option');
    option.innerHTML = font;
    option.value = font;
    select.appendChild(option);
  });
  
  // Add a Textbox using a custom font
  var textbox = new fabric.Textbox('Lorum ipsum dolor sit amet', { 
		left: 50,
    top: 50,
    width: 150,
    fontFamily: 'Pacifico',
	  fontSize: 20
	});
  canvas.add(textbox).setActiveObject(textbox);
  
  // Apply selected font on change
  document.getElementById('font-family').onchange = function() {
    canvas.getActiveObject().set("fontFamily", this.value);
    canvas.requestRenderAll();
  };
  
});