How to load the custom font in pdfium.wasm

[CCMKarthik123]

We retrieve the PDF image using pdfium.wasm on the client-side. However, in this scenario, custom fonts such as Turkish characters are not visible in the images. Please provide a solution to ensure that the correct fonts are retrieved from the pdfium.wasm file.

Please provide solution to set the custom font and get the correct image .

[CCMKarthik123]

Any solutions to resolve this issue?

[sathiyaseelanksf3503]

Kindly provide solutions to resolve this issue?

[vecihibaltaci]

Is there any update on this?

[bblanchon]

@jerbob92, any idea how to fix this issue?

[jerbob92]

@bblanchon don't really think this should be asked for in this project, but font loading on the WASM version doesn't work very different from the normal version, the only difference is that in WASM you don't have the system/OS fonts by default, so pdfium isn't able to resolve non-embedded fonts by default. This can be solved in 2 ways:

1. Putting fonts in the default search path of pdfium:

/usr/share/fonts
/usr/share/X11/fonts/Type1
/usr/share/X11/fonts/TTF
/usr/local/share/fonts

2. Initialize pdfium with FPDF_InitLibraryWithConfig and use the m_pUserFontPaths property on FPDF_LIBRARY_CONFIG to provide your own list of paths, but you do have to make sure that the fonts are on that path.

---

How you put fonts in there depends on how you run the WASM, assuming this is the normal Emscripten version:
https://emscripten.org/docs/api_reference/Filesystem-API.html#id2

Something like this should put a font filedata in /usr/share/fonts:

// Assuming data contains the base64 encoded fileData,
Module['FS_createDataFile']("/usr/share/fonts", "Ubuntu-BI.ttf", atob(data), true, true);

[KameshRajendran]

Hi @bblanchon, @jerbob92 ,

As per your suggestion, we have tried providing the font path and published a sample on GitHub at the following location:

https://github.com/KameshRajendran/pdfiumissue

You can find the published link here : https://kameshrajendran.github.io/pdfiumissue/

Document : example.pdf

Image generated using pdfium.dll	Image generated using pdfium.wasm

We attempted to add custom fonts using the following code snippet, which is also included in the provided link

var FPDF_LIBRARY_CONFIG = {
                 version: 3,  // Must be set to 3
                 m_pUserFontPaths: [],  // Array to hold custom font paths
             };
             FPDF_LIBRARY_CONFIG.m_pUserFontPaths.push('arialbd.ttf');
             FPDF_LIBRARY_CONFIG.m_pUserFontPaths.push('arial.ttf');
             FPDF_LIBRARY_CONFIG.m_pUserFontPaths.push('cour.ttf');
             var pConfig = Module.wasmExports.malloc(FPDF_LIBRARY_CONFIG.m_pUserFontPaths.length);
             Module.HEAPU8.set(FPDF_LIBRARY_CONFIG, pConfig);
             FPDF.InitLibraryWithConfig(pConfig);

You can find the complete code snippet here:

https://github.com/KameshRajendran/pdfiumissue/blob/main/index.html#L481C13-L490C53

Additionally, we initialized InitLibraryWithConfig as shown below, which is also documented in the link:

FPDF.InitLibraryWithConfig = Module.cwrap('FPDF_InitLibraryWithConfig', '', ['number']);

You can find the complete code snippet here: https://github.com/KameshRajendran/pdfiumissue/blob/main/index.html#L952

Despite these efforts, we are still unable to display text with custom fonts correctly. Could you please review our code and provide a solution to resolve this issue?

Note: This issue is affecting our production site, impacting a significant number of customers.

Thank you.

[jerbob92]

@KameshRajendran This is not as per my suggestion.

m_pUserFontPaths should contain a path, not a filename.

You're also not putting the files itself in the virtual storage. So pdfium has no way to load your font.

Note: This issue is affecting our production site, impacting a significant number of customers.

I don't get what you're trying to achieve with comments like this. It only makes me not want to help you anymore.

[KameshRajendran]

Hi @jerbob92 ,

I apologize if my previous comment came across as inappropriate or unhelpful. That was not my intention. I wanted to convey the urgency of the issue affecting our production site and a significant number of customers. I appreciate your assistance and understand the importance of clear and respectful communication.

Thank you for your understanding.

[Tamilselvan-Durairaj]

Hi @jerbob92 ,

We have configured the font file locations for our implementation and made modifications to the samples as described below:

The sample are committed in the below repository :
https://github.com/Tamilselvan-Durairaj/Pdfium

Publish Sample link for that:
https://tamilselvan-durairaj.github.io/Pdfium/

We encountered this issue and have been unable to find a proper solution. Could you please provide your guidance on how to resolve this?

[jerbob92]

@Tamilselvan-Durairaj thats a url, not a path, it has to be a path at which the font files are available in the virtual webassembly filesystem. Pdfium does not support loading fonts from a url.

Also, the way you are making the config and passing it to pdfium looks pretty shady... The commented out loadCustomFontPaths(paths) looks more like what it should be.

[jerbob92]

@Tamilselvan-Durairaj are you sure you are actually using this project? Your source mentions https://github.com/paulocoutinhox/pdfium-lib

[jerbob92]

@bblanchon I have discovered that you can preload files in the compiled wasm.
If you build the wasm with the option: --embed-file /usr/share/fonts@/usr/share/fonts it will completely include the host system font path at that path. It makes the wasm file quite big (200MB, my fonts directory is quite big).

I actually did that and could render the example PDF from this issue fine with the wasm.

According to the pdfium source the base fonts are:

    "Courier",
    "Courier-Bold",
    "Courier-BoldOblique",
    "Courier-Oblique",
    "Helvetica",
    "Helvetica-Bold",
    "Helvetica-BoldOblique",
    "Helvetica-Oblique",
    "Times-Roman",
    "Times-Bold",
    "Times-BoldItalic",
    "Times-Italic",
    "Symbol",
    "ZapfDingbats",

We could also make a folder with just these fonts and then compile them into /usr/share/fonts in the wasm. I think the only question would be if this is actually allowed.

[Tamilselvan-Durairaj]

Hi @jerbob92 ,

Thank you for your support. Following your suggestion, we generated the file, and it has worked perfectly. Once again, We appreciate your valuable guidance in achieving this.
I have one more question for you. Is it possible to load custom fonts into PDFium without embedding the fonts in the generated PDFium wasm file? The current approach has increased the file size of the wasm file.

Thanks You.

[jerbob92]

@Tamilselvan-Durairaj yes, the way to do is with the method that I have given before. Either by putting fonts in one of the predefined font folders using the virtual filesystem, or by giving a custom font folder with m_pUserFontPaths and then putting fonts in that font path using the virtual filesystem. You can ofcourse only compile the required font files into the wasm file instead of your whole fonts folder.

If you use --preload-file, the font data will be put in a separate file next to the wasm and js.

[Tamilselvan-Durairaj]

Hi @jerbob92 ,

By your guidelines we have modified that, font files can be load from the script file by the given function

fetch(scriptdirectory+ "/" + "Fonts/arial.ttf").then(function (response) {
   if (response.ok) {
      return response.arrayBuffer();
   }
}).then(function (value) {
    if(value){
        var name = "/usr/share/fonts/" + "arial.ttf";
        PDFiumModule.FS.createPath("/", "/usr/share/fonts/", true, true);
        PDFiumModule.FS.createDataFile(name, null, new Int8Array(value), true, true, true);
    }
});

Now we can able to load the font files to pdfium from the script file. It does not increase wasm file size.
Thank you for your support and guidelines