Wsrtjtyk

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>