/*
When working with custom fonts on a fabric canvas, it is recommended to
use a font preloader. Not doing so is likely to cause texts that are
imported onto the canvas to be rendered with a wrong (default) font. It
can also cause you to see a FOUT (Flash of Unstyled Text) right after
changing the font of a text. The reason behind this is that the browser
will only load a font after it is used in the DOM. Preloading fonts
prevents this from happening. In this example we are using Font Face
Observer (https://github.com/bramstein/fontfaceobserver) to preload
Google Fonts, using the following steps:
- Add the custom fonts using @import in your CSS
- Make an array containing the names of all the custom fonts
- Load all the custom fonts using a promise
- When the promise is fulfilled, initialize the fabric canvas
*/
// 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: 200,
top: 50,
width: 150,
fontFamily: 'Pacifico',
fontSize: 20
});
canvas.add(textbox).setActiveObject(textbox);
// Add a Textbox using a custom font
var textbox2 = new fabric.Textbox('Lorum ipsum dolor sit amet', {
left: 50,
top: 50,
width: 150,
fontFamily: 'Pacifico',
fontSize: 20
});
canvas.add(textbox2);
// Apply selected font on change
var fontDropDown = document.getElementById('font-family');
fontDropDown.onchange = function() {
canvas.getActiveObject().set("fontFamily", this.value);
canvas.requestRenderAll();
};
canvas.on('selection:created', function(options) {
if (options.target.type == 'textbox') {
fontDropDown.value = options.target.fontFamily;
}
});
canvas.on('selection:updated', function(options) {
if (options.target.type == 'textbox') {
fontDropDown.value = options.target.fontFamily;
}
});
});
@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata');
canvas {
border: 1px solid #999;
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
Font-family: <select id="font-family"></select><br />
<canvas id="c" width="600" height="300"></canvas>
