Can pdfjs.express load fonts that are not installed on a computer, and write annotations with them?

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.4

Detailed description of issue
Are there any functionalities that, webviewer load fonts that are not installed on client, and use the fonts to write annotations?

Expected behaviour
What we want to achieve is, add font to webviewer e.g. Noto Sans JP, and write annotations with them on any device.

Does your issue happen with every document, or just one?
n/a

Link to document
n/a

Code snippet
What we tried is below.

instance.Fonts.addAnnotationFont('Noto Sans JP');

But when writing annotations on devices which Noto Sans JP is not installed, shown annotations are not Noto Sans JP.
So, we tried loading fonts using links as below, which did not work.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
3

Hi there,

You can use setCustomFontURL API to request font resources:
https://pdfjs.express/api/Core.html#.setCustomFontURL__anchor

See this forum post for similar issue:

Best regards,
Kevin Kim

4

Hi Kevin,

Thank you for your response.
I tried setting a custom font using below code, but the annotation was not written in the set font.
After the setCustomFontURL was called and webviewer was initialized, no error was given in the browser’s console. Moreover, looking at the browser’s network tab, there was no request from webpage to the customFontUrl.
Do you see any mistake on my code?

WebViewer({ path: publicPath, initialDoc: inlineUrl, licenseKey: licenseKey, css: cssPass}, element)
	.then((instance) => {
		instance.Core.setCustomFontURL('mypath.../webfonts/NotoSansJP-Regular.ttf');
		instance.Fonts.addAnnotationFont('Noto Sans JP');

Kind regards,
hiraki

5

Hi there,

The Fonts class is under the UI namespace:
https://pdfjs.express/api/UI.Fonts.html

I am able to use google’s Roboto Mono font using the following:

instance.Core.setCustomFontURL('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
  instance.UI.Fonts.addAnnotationFont("Roboto Mono");

image
image1730×1460 178 KB

Best regards,
Kevin Kim

6

Hi Kevin,

Your freetext doesn’t look like its written in Roboto Mono font.
Maybe some alternative font is being used by the viewer, or the Roboto Mono font is not loaded?
Would you please check if there’s any solution for this?

image
image2406×1145 164 KB

Kind regards,
hiraki

7

Hi there,

This is actually expected and is required by the host machine to have the font installed. This is why the font was not working on my end.

You can read a similar guide here about embedded fonts and how pdf.js will substitute with the closest font (note that this guide is for Apryse WebViewer):

Best regards,
Kevin Kim