How can I keep the same font after converting to canvas?

Viewed 17

I have a simple function that converts a div to PDF by using html2canvas and jsPDF.

        const exportToPdf = () => {
    const component = props.componentRef.current

    html2canvas(component, {scale: props.scale}).then((canvas) => {
        const dataImage = canvas.toDataURL('image/jpeg');

        const pdf_width = pxTomm(canvas.width);
        const pdf_height = pxTomm(canvas.height);

        const pdf = new jsPDF(
            props.orientation,
            'mm',
            [pdf_width + props.xCoord, pdf_height + props.yCoord]);

        pdf.setProperties({title: props.title});

        pdf.addImage(dataImage, 'JPEG', 0, 0, pdf_width, pdf_height);

        window.open(pdf.output('bloburl'),'_blank')
    })
}

The problem is that the conversion doesn't seem to use the div's font family: National, sans-serif.

Here is the Before and After

This affects only numbers. Any idea how to solve this? I can't change the actual font as the whole project uses the same font. It's added through @font-face.

0 Answers
Related