How to set a custom font file?

rlaks5757 · July 3, 2025, 5:01am

Product: Webviewer SDK, Server SDK

Product Version: 11.4.0

Please give a brief summary of your issue:
Can I add custom fonts to a DOCX file, apart from the default fonts?
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
If I open a DOCX file that uses fonts that are not available in the viewer, the text is displayed incorrectly. Is there a way to add custom fonts to the viewer?

(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

system · July 3, 2025, 5:01am

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

To display DOCX files with custom fonts in WebViewer, you need to make sure that the fonts are accessible to the viewer. This can be done by serving the custom fonts from your server and configuring WebViewer to use them.

Some things you can try:

Copy your custom font files to a location that is accessible via URL on your server.

Modify the WebViewer configuration to include the URL of the custom font directory.

Ensure that the fonts.json file is updated with your custom fonts so that WebViewer can recognize and apply them correctly.

Here are some resources that might help you:

Serving the default font package from your server: This guide explains how to set up custom fonts for WebViewer.

Get Started with WebViewer via NPM: Provides instructions on setting up WebViewer, which may need to be configured for custom fonts.

Integrate WebViewer JavaScript PDF Viewer & Editor into a Web App: A guide on manually integrating WebViewer, useful for custom configurations.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

mickael.vanstraelen · July 3, 2025, 8:28am

Hi Rlaks.

Yes this is possible, I invite you to read this guide explaining the current behavior and how you can customize the fonts:

Let us know if you have any questions.

rlaks5757 · July 3, 2025, 8:45am

Thank you for your cooperation.

Then, how do you apply it in the Server SDK?

If there is, please include an example of using it.

Regards,

mickael.vanstraelen · July 3, 2025, 9:21am

Hi,

Everything is included in the guide:

Core.setCustomFontURL("https://www.somealternateurl.com/chosensubpath/");

Once you have created your new fonts file using the Webfont Creation Tool, you can host the file and use the API above.

Best Regards,
Mickaël.

rlaks5757 · July 9, 2025, 5:17am

Thank you for your cooperation.

WebViewer(
          {
            path: `${BASE_PATH}/pdftronWeb`,
            licenseKey: PDFTRON_LICENSE_KEY,
            fullAPI: true,
          },
          viewer.current as HTMLDivElement
        ).then(async (instance: WebViewerInstance) => {
          if (!instance) return;

          instance.Core.setCustomFontURL("/web-viewer-font");

...

fonts.json
fonts.json (28.6 KB)

The list does not appear in the word Editor Font Family List even though I used it as above.

What should I do in this case?

Regards,

mickael.vanstraelen · July 9, 2025, 8:04am

Hi Rlaks,

It seems the API expects an absolute URL, not a relative one.

Could you check your network panel when loading the Webviewer to see if you have any 404 and check for fonts.json to see if it’s fetching from the right path?

Could you please provide some screenshots?

Best Regards,
Mickaël.

rlaks5757 · July 9, 2025, 8:20am

Thank you for your cooperation.

I have already attached the current fonts.json to the above inquiry as fonts.json.

The fonts are currently in /public/web-viewer-font from the top path

You can ignore ‘BASE_PATH’.

Regards,

mickael.vanstraelen · July 9, 2025, 8:24am

Hi Rlaks,

I’m afraid I don’t understand your reply here.

As the guide show here, setCustomFontURL seems to be expecting a full URL, not a relative path:

Also, you didn’t reply to this:

Could you check your network panel when loading the Webviewer to see if you have any 404 and check for fonts.json to see if it’s fetching from the right path?

Could you please provide some screenshots of the network panel?

Best Regards,
Mickaël.

rlaks5757 · July 9, 2025, 9:03am

instance.Core.setCustomFontURL(
            `${baseUrl}/web-viewer-font/fonts.json`
          );

//http://localhost:3000/web-viewer-font/fonts.json

Thank you for your cooperation.
Set the URL to http://localhost:3000/web-viewer-font/fonts.json and get the result as shown in the picture above, but it is not reflected in the word editor font list.

Regards,

mickael.vanstraelen · July 9, 2025, 10:21am

Hi Rlaks,

Thank you for your reply.

Could you check your network panel when loading the Webviewer to see if you have any 404 and check for fonts.json to see if it’s fetching from the right path?

To open the Network panel, you can use this shortcut: Control + Shift + I (or Command + Option + I on macOS). Be sure to open this tab, then reload the Showcase to have every query inside the panel.

Could you please provide some screenshots of the network panel?

Best Regards,
Mickaël.

rlaks5757 · July 10, 2025, 12:21am

Thank you for your cooperation.

I was able to see that the network was importing the corresponding JSON file when I was importing the PDF file, but I couldn’t find it in NetWork, although I don’t know if it was not doing that communication when I was importing the Word File.

Regards,

mickael.vanstraelen · July 10, 2025, 7:37am

Hi Rlaks,

Thank you for providing the screenshot.
It’s indeed importing the corresponding JSON.
Could you tell me what is the font from your PDF that you would like to add to Webviewer?

When creating the JSON file did you respect this step:

Within the fontList, each font entry consists of a list of variants that define various styles for the font. It is crucial to include Regular, Italic, and Bold in the variants list, ensuring that the capitalization matches exactly. You have the flexibility to define these styles with or without a hyphen. For example, you could define them as Lato Regular, or as Lato-Regular.

Failure to adhere to these constraints will result in the font being filtered out by the Webviewer. Please note that in the variants, the key should be left unchanged. You can define the desired values, which will generate corresponding font files with the specified names in the variant after the font.json is compiled by the WebFontCreate ClI.

Let me know if you have any questions regarding this.

Best Regards,
Mickaël.

rlaks5757 · July 10, 2025, 7:54am

Thank you for your cooperation.

The font I’m adding right now is Maru buri font and it’s written like an attached screen shot.
The font file is in the same path as fonts.json.

Regards,

mickael.vanstraelen · July 10, 2025, 8:08am

Hi Rlaks,

Thank you for your reply.

So yes, you are currently missing “Italic” which results in the font being filtered out by the Webviewer.

Please make sure to read the guide and follow all the steps needed. You will need to generate a new fonts.json using WebFontCreate CLI, including Regular, Italic, and Bold.

Best Regards,
Mickaël.

rlaks5757 · July 14, 2025, 6:43am

Thank you for your cooperation.

It seems that font is applied in PDF Viewer. But it doesn’t seem to apply to Docx Editor. The reason why I think this way is that when I use Docx Editor, the operation of receiving the json file from the network tab is not performed and it is not reflected in the editor’s font list.

Regards,

mickael.vanstraelen · July 14, 2025, 8:40am

Hi Rlaks,

Thank you for letting me know.
Could you provide us with your fonts.json? I will try to reproduce this on my side.

Best Regards,
Mickaël.

rlaks5757 · July 14, 2025, 8:44am

Thank you for your cooperation.

Please check the attached file below.

fonts.json (328.5 KB)

Regards,

mickael.vanstraelen · July 14, 2025, 8:54am

Hi Rlaks,

I’m sorry, could you also provide the .ttf files?

Best Regards,
Mickaël.

rlaks5757 · July 14, 2025, 9:07am

Thank you for your cooperation.

I’m sending you the link to the font file I used.

https://pdftron.s3.amazonaws.com/downloads/SelfServeWebFontsV2.zip

Regards,