Render custom icons / font in jsPDF

Let me start by saying that I went through all previous topics regarding this question to no avail, hence i'm just going to try and ask.

We use d3.js to render a graph and I want to download this graph as a pdf file. Our graph displays custom icons based on a string, 'icon-location' renders a location icon (e.g. of a rendered node):

<g class="node" transform="translate(674.590276584245,236.58821591338815)">
<path class="location"
d="m0,26l-0.5463,0.8376l0.5554,0.3622l0.5498,-0.3705l-0.5589,-0.8293zm0,0c0.5589,0.8293 0.5591,0.8291 0.5595,0.8289l0.0011,-0.0008l0.0038,-0.0026l0.0138,-0.0093l0.0521,-0.0355c0.0454,-0.031 0.1119,-0.0767 0.1981,-0.1365c0.1723,-0.1196 0.4236,-0.2958 0.7424,-0.5242c0.6375,-0.4569 1.5458,-1.1234 2.6348,-1.9657c2.1763,-1.6835 5.082,-4.0756 7.9917,-6.9063c2.9059,-2.8269 5.8395,-6.114 8.0525,-9.5898c2.206,-3.465 3.7502,-7.202 3.7502,-10.9082c0,-14.3466 -10.7905,-23.75 -24,-23.75c-6.5731,0 -12.5778,2.20084 -16.94779,6.30208c-4.37892,4.10962 -7.05221,10.06842 -7.05221,17.44792c0,3.825 1.53918,7.6223 3.74854,11.1165c2.21448,3.5022 5.15025,6.7756 8.05816,9.5729c2.9116,2.8009 5.8191,5.147 7.9968,6.7921c1.0896,0.8232 1.9986,1.4723 2.6367,1.9167c0.3191,0.2223 0.5706,0.3934 0.7433,0.5095c0.0863,0.0581 0.1529,0.1025 0.1984,0.1326l0.0523,0.0345l0.0139,0.0091l0.0039,0.0026l0.0011,0.0007c0.0004,0.0002 0.0006,0.0004 0.5469,-0.8372z">
</path><text class="icon" x="-12" y="12"
style="font-family: &quot;Hola Icons&quot;; font-size: 18px;">icon-location</text><text y="38"
class="val" pointer-events="none" title="Las Ramblas, Barcelona">Las Ramblas, Barcelona</text>
<g></g>


This works because we added the font to our project (as a and it is loaded into the browser, the graph can find this font and its icons. But our pdf has no knowledge of this, hence we need to add it manually. According to the jsPDF docs we can convert a .ttf file using their converter to add our custom fonts. I used a .ttf file of the same font and convertered it to the base64 string, this is the code that handles it:

const font = 'AAE...'

export function addFont() {
const callAddFont = function (this: jsPDF) {
this.addFileToVFS('Hola-Icons.ttf', font);
this.addFont('Hola-Icons.ttf', 'Hola Icons', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont]);
}


which I call where I create my pdf like this:

addFont();
const pdf = new jsPDF();
pdf.setFont('Hola Icons', 'normal');
pdf.addImage(imgData, 'PNG', 0, 0, width, height);
pdf.save('barcelona-map.pdf');


However, my downloaded pdf does not display the icons but instead displays it's text 'icon-location'. I used fontdrop to check if my icons were actually properly added to the ttf and they were. I added a console.log after calling addFont to list all fonts available and 'Hola Icons' was added. I am having trouble debugging as to why my icons do not render, if it is a mapping problem or something else entirely. Any input would be greatly appreciated

Continue reading...