Odtnhj

I have a very weird issue with croppie:
i am using it on this page - sorry the page is in Hebrew...
www.mzungu.co.il/add_article.php the (croppie area opens in pressing the first choose file)

i am using a different font on the image being cropped. the font is in Hebrew and its "Trashim".
The issue is:
The new Font is not working if i add a picture and then press crop.
If i press cop again it works.
If i toggle zoom before first press on 'crop' it works.
If i Paste the input instead of typing it, it works.

Like i said, very weird :(

my code:

<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>