font load issue with fabric js in ios mobile device

Question

I am getting font load issue in ios mobile device when i render canvas using fabric js. But i web and Android device it is working perfectly.This issue happen when i generate new canvas after downloading canvas.I don't have idea how to resolve it. can any one help me to resolve it ?

**Font loading code :**
                  templateData.text_json.forEach(textElement => {
                    // alert(textElement.fontName)
                    // Create a new FontFace instance for each textElement
                    var f = new FontFace(textElement.fontName, `url(${preTextfam + textElement.fontPath})`);
                    // http://192.168.0.105/photo_editor_lab_backend/image_bucket/fonts/kufam_black.ttf

                    // Add the font loading promise to the array
                    fontLoadingPromises.push(
                      f.load().then(function (loadedFace) {
                        // alert(" ---done")
                        document.fonts.add(loadedFace);
                        // Return the textElement for further processing
                        return textElement;
                      }).catch(function (error) {
                        console.log(`Error loading font ${textElement.fontName}:`, error);
                        // Use a fallback font if custom font fails to load
                        textElement.fontName = "Inter-Regular"; // Fallback font
                        return textElement;
                      })
                    );
                  });

                  // alert(getC.length)
                  Promise.all(fontLoadingPromises).then(loadedTextElements => {
                    // document.getElementById("set_4").innerHTML = fontLoadingPromises.length
                    // fabric.util.clearFabricFontCache();

                    loadedTextElements.forEach(textElement => {
                      // Existing code to create and configure Fabric.js text objects...
                      // Ensure you set fontFamily to textElement.fontName which might be the fallback font
                      var alignment_text = 'left';
                      switch (textElement.alignment) {
                        case 1:
                          alignment_text = 'left';
                          break;
                        case 2:
                          alignment_text = 'center';
                          break;
                        case 3:
                          alignment_text = 'right';
                          break;
                      }

                      // Render the Rect in canvas 

                      var text = new fabric.Text(textElement.text, {
                        left: textElement.xPos,
                        top: textElement.yPos,
                        fontSize: textElement.size,
                        textAlign: alignment_text,
                        fontFamily: textElement.fontName,
                        charSpacing: 0,
                        opacity: textElement.opacity,
                        fontWeight: textElement.fontWeight,
                        index: textElement.pak_index,
                        shadow: {
                          "color": textElement.shadowColor,
                          "blur": textElement.shadowRadius,
                          "offsetX": textElement.shadowOffsetX,
                          "offsetY": textElement.shadowOffsetY
                        },
                      });

                      if (textElement.maxWidth && textElement.maxHeight) {
                        wrapAndShrinkText(text, canvas, textElement.maxWidth, textElement.maxHeight,
                          textElement);
                      }

                      if (textElement.aiTag === "cta" || textElement.aiTag === "h1" || textElement
                        .aiTag ===
                        "h2") {
                        var centerX = textElement.xPos + (textElement.maxWidth / 2);

                        var centerY = textElement.yPos + (textElement.maxHeight / 2) - 11;

                        if (textElement.alignment == 2) {
                          text.set({
                            textAlign: 'center',
                            originX: 'center',
                            originY: 'center',
                            left: centerX,
                            top: centerY,
                          });
                        } else if (textElement.alignment == 1) {
                          text.set({
                            textAlign: 'left',
                          });
                        } else if (textElement.alignment == 3) {
                          text.set({
                            textAlign: 'right',
                            originY: 'center',
                            originX: 'left',
                            top: centerY,
                          });
                        }
                      }



                      if (textElement.palette_color_id == 1) {
                        text.set("fill", createDarkMutedcolor);
                      } else if (textElement.palette_color_id == 2) {
                        text.set("fill", createMutedcolor);
                      } else if (textElement.palette_color_id == 3) {
                        text.set("fill", createVibrantcolor);
                      } else if (textElement.palette_color_id == 4) {
                        text.set("fill", createLightMutedcolor);
                      }

                      text.objectCaching = false;
                      // canvas.moveTo(text, textElement.pak_index);
                      // canvas.bringToFront(text)

                      canvas.add(text);
                      scaleAndPosition(text);
                    });

                    // Now it's safe to convert the canvas to a data URL
                    // Place your toDataURL code here
                  }).catch(error => {
                    console.error('Error processing text elements:', error);
                  });
                  canvas.renderAll();

                })

**Download code :**

    // Function to handle the download
    function downloadImage(format, filename) {
      const dataURL = canvas.toDataURL({
        format: format,
        multiplier: 1,
        quality: 1, // Adjust as needed for JPG
      });
      var a = document.createElement("a");
      a.href = dataURL;
      a.download = "Flyerwiz_ai." + format;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      canvas.overlayImage?.dispose();
      canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
    }

    // Event handler for downloading PNG
    $("#download_png").on("click", function () {
      addWatermarkAndDownload('png', 'Flyerwiz.png');
    });

I need to load font in ios mobile device in fabric js.

Fabric js veriosn : 5.3.0