javascript – Font not loading on iOS mobile devices after downloading Canvas with Fabric.js

I’m encountering an issue with font loading specifically on iOS mobile devices after downloading a canvas generated using Fabric.js. The font loads perfectly on web and Android devices, but fails consistently on iOS mobile device.

Font Types: I’ve tried using both TTF and WOFF font formats.

Preloading: Fonts are preloaded using Fabric.js’s loadFont method before rendering the canvas.

Error Handling: No errors are reported during font loading or canvas generation on iOS.

Post-Download Issue: The problem occurs only after downloading the canvas. Fonts fail to load on iOS devices even though they are correctly loaded during the initial canvas rendering.

I’ve thoroughly tested the application on various iOS devices and browsers, and the issue persists across all of them.

Font load code :

templateData.text_json.forEach(textElement => {

  // Create a new FontFace instance for each textElement
  var f = new FontFace(textElement.fontName, `url(${preTextfam + textElement.f})`)

  // Add the font loading promise to the array
    f.load().then(function (loadedFace) {
      // alert(" ---done")
      // 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;

Download code

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; = "download." + format;
  canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
// Event handler for downloading PNG
$("#download_png").on("click", function () {
  addWatermarkAndDownload('png', 'download.png');

I also try bloburl for downloading image but still not getting any solution.

Latest articles


Related articles

Leave a reply

Please enter your comment!
Please enter your name here