Add or Embed Custom Fonts in Our JavaScript PDF Viewer

PDF files are supposed to be rendered exactly the same, no matter which PDF viewer you’re using. One reason why this is the case is because a PDF file can embed the fonts required to render it.

However, sometimes — due to the size or other considerations — fonts aren’t embedded, which makes the PDF viewer look for fonts on the current system. Depending on the fonts that are available, this can cause rendering problems.

While the best option is to always embed fonts in the PDF, this isn’t always possible, especially if you’re working with third-party PDF files. This is where custom font path support comes in.

On Standalone deployments of PSPDFKit for Web, you can instruct the browser to fetch font assets to use when rendering documents. Please notice that a font that includes all characters is usually more than 200 MB in size. That’s tough for a web browser. For an optimized experience when using custom fonts, we recommend PSPDFKit Server, as it includes built-in custom font path support.

Standalone Deployments

You can specify an array of PSPDFKit.Font instances when initializing PSPDFKit for Web under the PSPDFKit.Configuration#customFonts property:

const fetcher = (fontFileName) =>
  fetch(`https://example.com/${fontFileName}`).then((r) => {
    if (r.status === 200) {
      return r.blob();
    } else {
      throw new Error();
    }
  });

const customFonts = ["arial.ttf", "helvetica.ttf", "tahoma.ttf"].map(
  (font) => new PSPDFKit.Font({ name: font, callback: fetcher })
);

PSPDFKit.load({
  customFonts
  // ...your additional options
});

Please consider that the array specified must remain constant between different instances of PSPDFKit for Web. So instead of specifying PSPDFKit.Configuration#customFonts as a literal array expression, we recommend passing an identifier you can reuse between PSPDFKit instances, as shown in the previous example. This is because we check during runtime that the same array of fonts is being specified when loading instances by using referential equality for the comparison. If a different array is specified between loading attempts, the instance won’t load.

When constructing PSPDFKit.Font instances, you need to identify a name property with the file name and extension of the font asset, and a callback that receives the same name as an argument where you can define the logic to use for retrieving the font. The callback must return a Promise that resolves to a Blob.

For optimizing subsequent loads of the fonts, you can make use of different caching strategies. For example, you can rely on HTTP caching headers returned from the server the font is fetched from, use a service worker in combination with the Cache API, use IndexedDB to store the font blobs on the client side, or use any kind of strategy that better suits your use case.

If the callback rejects or returns a different value than the expected blob, PSPDFKit will continue rendering the document using its built-in fallback fonts, and an error will be logged into the browser console.

PSPDFKit will invoke the specified callbacks before beginning to render your document, which is why it’s important to consider a good strategy to prevent an impact on user experience. Custom fonts are also going to be retrieved if PSPDFKit.preloadWorker is used. As a result, once you reach the point of creating an instance, both the fonts and WebAssembly artifacts might already be available upfront.

Server-Backed Deployments

You can expose a directory of fonts from the host machine to the Docker container by adding the following to your docker-compose.yml file:

pspdfkit:
  volumes:
    - /font-directory-path-on-the-host:/custom-fonts

The font directory can be any directory that is accessible to your app, and all .ttf, .ttc, and .otf files will be added to the font list of PSPDFKit.

Microsoft Core Fonts

According to Wikipedia:

“Core fonts for the Web was a project started by Microsoft in 1996 to create a standard pack of fonts for the World Wide Web. It included the proprietary fonts Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings, all of them in TrueType font format…”

While Microsoft no longer offers these files directly, they can be legally downloaded. The EULA prohibits redistribution, but you can download them and add them to our server product as a custom font. You can use free software such as 7-Zip to extract the TTF font files from the downloaded packages.

These fonts are widely used on the web and PDF files and will improve render fidelity for PDF documents that use them.