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
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;
})
);
});
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;
a.download = "download." + 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', 'download.png');
});
I also try bloburl for downloading image but still not getting any solution.
