The Document Viewer allows users to sign any supported document type by drawing, typing, or uploading signature images. The images are then merged into the signature fields and digitally signed using an electronic certificate.

Learn More

This getting started tutorial shows how to electronically sign documents using the Document Viewer and how to digitally sign the signed signature fields server-side.

Digitally Sign Signature Fields with PFX Certificates

The following screenshot shows the Document Viewer signature soft pad, which provides this out-of-the-box functionality for capturing user signatures.

By default, typical fonts that are available on all platforms, browsers, and devices will be enabled.

Importing Fonts

However, you are able to specify any fonts that you want for this process. The Document Viewer will automatically use any loaded web fonts that have been added to your html using a <link> in the head of your html or by using the @import method.

For example, if you wanted to use the Pacifico font from Google Fonts, you could use the following stylesheet:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
</style>

As an alternative, you can also add the links to the header of your html page:

<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=Pacifico&display=swap" rel="stylesheet">

Default Font

To set a default font that is automatically selected in the signature softpad, you can use the DefaultSignatureFont property of the SignatureSettings class while creating a Document Viewer instance.

The following code shows how to set the font in ASP.NET Razor code:

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "documents/signme.tx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
        settings.SignatureSettings.DefaultSignatureFont = new SignatureFontSettings() {
                Family = "Pacifico",
        };
}).Render()

The following code shows how to set the default font in a React application:

<DocumentViewer
  width="1000px"
  height="800px"
  basePath="https://backend.textcontrol.com?access-token=yourtoken"
  signatureSettings={{ defaultSignatureFont: { family: "Pacifico" }}}
  >
</DocumentViewer>

In Angular, the default font would be set as shown in the following code:

<tx-document-viewer
                width = "800px"
                height = "800px"
                basePath = "https://backend.textcontrol.com?access-token=yourtoken"
                [signatureSettings] = "{ 
                      showSignatureBar: true, 
                      ownerName: 'Paul',
                      signerName: 'Jacob',
                      defaultSignatureFont: { family: 'Pacifico' },
                      signatureBoxes: [{name: 'txsign', signingRequired: true, style: 1}]
                     }">
</tx-document-viewer>

Conclusion

By using custom fonts, you can provide a unique look and feel to the signature soft pad in the Document Viewer. This article showed how to use custom fonts for the signature appearance and how to import CSS fonts from Google Fonts.