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.

Custom fonts for 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>
view raw test.html hosted with ❤ by GitHub

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">
view raw test.html hosted with ❤ by GitHub

Default Font

To set a default font that is automatically selected in the signature softpad, you can use the DefaultSignatureFont property of the SignatureSettings ╰ TX Text Control .NET Server for ASP.NET
╰ Web.MVC.DocumentViewer Namespace
╰ SignatureSettings Class
The SignatureSettings class describes the settings that are required for a document signing process using the DocumentViewer. 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()
view raw test.cshtml hosted with ❤ by GitHub

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>
view raw test.js hosted with ❤ by GitHub

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>
view raw test.html hosted with ❤ by GitHub

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.