проблема с новым шрифтом

У меня очень странная проблема с Кроппи:
Я использую его на этой странице — извините, страница на иврите …
www.mzungu.co.il/add_article.php the (область croppie открывается при нажатии первого файла выбора)

Я использую другой шрифт на обрезанном изображении. шрифт на иврите и его «Trashim».
Вопрос заключается в следующем:
Новый шрифт не работает, если я добавляю картинку, а затем нажимаю кадрирование.
Если я снова нажму на коп, это сработает
Если я переключаю зум перед первым нажатием на «кадрирование», это работает.
Если я вставлю ввод вместо его ввода, это сработает.

Как я уже сказал, очень странно 🙁

мой код:

<style>
@font-face {
font-family: 'Trashim';
src: url('Fonts/Trashim CLM Bold.ttf');
}
</style>
<script>
$(document).ready(function(){
var basic = {};
var width=500;
var height=250;
$(".crop-image").change(function () {
$('#demo-basic').croppie('destroy');
$(".crop_div").css({'display':'block'});
var reader = new FileReader();
var result = '';
console.log($('#demo-basic'));
basic = $('#demo-basic').croppie({
viewport: {
width: width,
height: height
},
//                    showZoomer: false
});
reader.onload = function (e) {
basic.croppie('bind', {
url: e.target.result,
// points: [77, 469, 280, 739]
});
}
;
reader.readAsDataURL(this.files[0]);

});

$('.crop').click(function () {
basic.croppie('result', {
type: 'base64',
size: 'viewport',
format: 'png',
circle: false
}).then(function (result) {
// console.log(result);

var canvas = $("body").find("canvas")[0];
var ctx = canvas.getContext("2d");
var img = new Image;
img.onload = function () {

// ctx.clearRect(0, 0, canvas.width, canvas.height);


ctx.drawImage(img, 0, 0);

ctx.drawImage(img, 0, 0);


// ctx.fillStyle = "white";
ctx.fillStyle = "rgba(255, 255, 255, 0.7)";

ctx.fillRect(0, 180, canvas.width, canvas.height);

ctx.fillStyle = "black";
ctx.font = "25px Trashim";

ctx.textAlign = "center";

ctx.fillText($("[name='article_authors_name']").val(), (width/2), 230);
ctx.font = "30px Trashim";
ctx.fillText($("[name='article_name']").val(), (width/2), 210);


// var c = document.getElementById("alpha");
var d = canvas.toDataURL("image/png");
console.log(d);
$("[name='article_banner']").val(d)
};
img.src = result;
});
});
});
</script>
<div class="form-group crop_div" align="right" dir="rtl">
<input type="hidden" name="article_banner" required/>
<div id="page">
<div id="demo-basic">
</div>
</div>
<div>
<button type="button" class="crop">חיתוך התמונה</button>
</div>
<div align="center">
<canvas id='testCanvas'width=500 height=250 class="final_image_canvas"></canvas>
</div>
</div>