How to Change the Font for Type Signatures in Angular PDF Viewer

17 Aug 20261 minute to read

Change the font family in the type signature of the PDF Viewer by adding a custom CSS stylesheet to the document and applying the desired font family to the type signature element. Include the Google Fonts link in the HTML head section to apply the font.

Signature Field

The following steps are used to include custom fonts for signature and initial field using typeSignatureFonts property.

Step 1: Follow the steps in the Getting Started guide to create a simple PDF Viewer sample.

Step 2: Insert the following code snippet to implement the functionality for using custom fonts in the signature field.

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allura" >
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sacramento">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inspiration">
changeFontFamily(){
	var pdfviewer=(<any>document.getElementById('pdfviewer')).ej2_instances[0];
	pdfviewer.signatureFieldSettings.typeSignatureFonts = [
      'Allura',
      'Tangerine',
      'Sacramento',
      'Inspiration',
    ];
   }

Initial Field

Insert the following code snippet to implement the functionality for using custom fonts in the initial field.

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allura" >
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sacramento">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inspiration">
changeFontFamily(){
	var pdfviewer=(<any>document.getElementById('pdfviewer')).ej2_instances[0];
	pdfviewer.initialFieldSettings.typeInitialFonts = [
      'Allura',
      'Tangerine',
      'Sacramento',
      'Inspiration',
    ];
   }

Implementing this enables the use of custom fonts in form-field signature and initial fields.