Customizing Electronic Signature Fonts

The fonts property of PSPDFKit.Configuration#electronicSignatures accepts an array of PSPDFKit.Font members that define the name of fonts to present to users when using the “Type” signature creation mode.

You’re also able to specify any fonts that need to be loaded using regular CSS techniques. For this, you can specify them on a custom style sheet loaded through the PSPDFKit.Configuration#styleSheets option; then, use the font family names of your loaded fonts when initializing the instance.

PSPDFKit for Web ships with four signing fonts available out of the box for offering as part of the signature creation UI. These are the ones specified as part of the PSPDFKit.defaultSigningFonts array.

As an example, if you wanted to use the Cookie font from Google Fonts, you could use the following style sheet:

@import url("https://fonts.googleapis.com/css2?family=Cookie&display=swap");

Then, if you want to offer all the default signing fonts in addition to Cookie, you could specify the following:

PSPDFKit.load({
  electronicSignatures: {
	 fonts: [...PSPDFKit.defaultSigningFonts, new PSPDFKit.Font({ name: “Cookie” })]
  },
  styleSheets: [“path/to/stylesheet”],
  // ...additional options.
})

If you wanted to keep the built-in fonts but skip Pacifico:

PSPDFKit.load({
  electronicSignatures: {
	 fonts: PSPDFKit.defaultSigningFonts.filter(font => font.name !== “Pacifico”)
  },
  // ...additional options.
})

Note that in case you’re explicitly setting the array of fonts, you must specify at least one.