Font Issue

FabricJS

by Eugene Vilder

HTML

<script src="//rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>

<canvas id="paper" width="400" height="200" style="border:1px solid #ccc"></canvas>
<select id="font-family"></select>

CSS

@font-face { font-family: "Arial Bold"; src: url(//ddp.presscentric.com/api/public/fonts/3SeR4ImQlDEejkuBVB75F9);}
@font-face { font-family: "Arial Italic"; src: url(//ddp.presscentric.com/api/public/fonts/5xuZXrsNXIhmIBbwNzdpZP);}
@font-face { font-family: "Arial"; src: url(//ddp.presscentric.com/api/public/fonts/7YMMCHMxI4zWN0hoxOargx);}

JavaScript

var canvas = new fabric.Canvas('paper');
// Define an array with all fonts
var fonts = ["Arial", "Arial Bold", "Arial Italic"];
const fontToLoad = fonts[2];

//fonts.unshift('Times New Roman');
// 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;
  if (font === fontToLoad) {
  	option.selected = true;
  }
  select.appendChild(option);
});

// Apply selected font on change
document.getElementById('font-family').onchange = function() {
    canvas.getActiveObject().set("fontFamily", this.value);
    canvas.requestRenderAll();
};

const preLoadedFonts = fonts.map((fontName)=>{
  return new FontFaceObserver(fontName);
}).map((f) => f.load());

Promise.all(preLoadedFonts).then(function () {
  console.log('Fonts have loaded');
  var textbox = new fabric.Textbox('Lorum ipsum dolor sit amet', {
    left: 50,
    top: 50,
    width: 200,
    fontSize: 20,
    textAlign: 'right',
    fontFamily: fontToLoad //Arial Italic
	});
  canvas.add(textbox).setActiveObject(textbox);
  canvas.requestRenderAll();
});