Noto Font not working with jsPDF using Vue

Question

I am trying to generate a PDF that can handle every language with jsPDF. The problem here is that I can't add the font to jsPDF.

This is what I did.

1. Got the font from Google Noto Fonts (So far I tried with NotoSans regular and NotoSerif Regular)

2. Converted the .ttf file in many ways using different converters, but mainly the one recomended in the Github documentation which is their fontconverter.

3. Modified the file to export the font like this: export const Noto = '[Encoded string]'; and saved it as NotoSerif-Regular-normal.js

4. Added the import in my Vue file.import Noto from "@/fonts/Noto/NotoSerif-Regular-normal.js";

5. Add the font to jsPDF.

   doc.addFileToVFS("Noto.ttf", Noto);
   doc.addFont("Noto.ttf", "Noto", "normal");
   doc.setFont("Noto", "normal");
   doc.setFontSize(16);
   

But hen I try to create the PDF, I get the following error:

jsPDF PubSub Error Font does not exist in vFS, import fonts or remove declaration doc.addFont('Noto.ttf'). 
Error: Font does not exist in vFS, import fonts or remove declaration doc.addFont('Noto.ttf').

Any idea of what is happening? I already tried jsPDF and jsPDF.Debug and they are not working with this font.

Answer 1

In the end, I had to do some changes to achieve this. first of all, the font converter was not working properly for me. I had to use this Base64 Converter and this solved my first issue.

The second issue that I had, was the missing curly brackets in the import, so I edited it like this:

import { Noto } from "@/fonts/Noto/NotoSerif-Regular-normal.js";

This solved completely my problem.