Я работаю над большим пользовательским приложением с Fabric JS, и я уже проделал большую работу. Но у меня проблема с инициализированным текстовым объектом, который использует веб-шрифт.

Пока этот шрифт является локальным на клиентес компьютера, у меня все нормально, иначе, веб-шрифт НЕ загружен, а текстовый объект на холсте отображается в шрифтовом семействе по умолчанию sans-serif.

Вот, вкратце, чем я занимаюсь(в этом примере я использую "все звезды" как мой веб-шрифт):

CSS: CSS загружается внутри fonts.css в голове перед fabric.js

@font-face{
    font-family:'allstar';
    src:
        url('/path-to-fonts/all_star-webfont.eot');
    src:
        url('/path-to-fonts/all_star-webfont.eot?#iefix') format('embedded-opentype'),
        url('/path-to-fonts/all_star-webfont.woff') format('woff'),
        url('/path-to-fonts/all_star-webfont.ttf') format('truetype'),
        url('/path-to-fonts/all_star-webfont.svg#allstarregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Javascript: он загружается внизу страницы внутри $ (document) .ready (function () {})

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();

Если я использую шрифт в другом месте на странице (например, в прозрачном теге span с точкой и загруженным шрифтом), он работает нормально. Но я нене думаю, чтоэто правильный способ кодирования.

Использую fabric.js версию 1.3.0