How to load the custom font initially for pre-existing signatures in React PDF Viewer

6 mins read

How to Load Custom Fonts for Pre-existing Signatures in Syncfusion React PDF Viewer

Description

This article demonstrates how to load custom fonts in the Syncfusion React PDF Viewer and apply them to pre-existing signature fields in a PDF document. By leveraging Google Fonts and PDF Viewer’s signatureFieldSettings, this solution enhances the document experience by enabling custom fonts for signature fields, ensuring that signatures are rendered as intended.

Solution

To load and apply a custom font (such as “Caveat”) to pre-existing signature fields in the PDF Viewer, you can use the Web Font Loader for dynamically loading Google Fonts into the viewer. The font will then be applied to the signature fields when the document is loaded. The solution involves configuring the viewer to retrieve and update form fields based on custom font settings.

Prerequisites

Syncfusion PDF Viewer Setup: Ensure that the Syncfusion PDF Viewer is installed and properly configured in your React project.
Google Fonts: A web font loader is used to load fonts from Google, making them available for use in the PDF Viewer.
Basic React Knowledge: A basic understanding of React components and hooks is required to follow along with the implementation.

Implementation Steps

Install Required Libraries

Ensure that you have the necessary Syncfusion and Google Fonts resources in place. In this example, we are using @syncfusion/ej2-react-pdfviewer and Google Fonts.

Set Up Custom Font Loading

You can use the Web Font Loader to load Google Fonts dynamically. This ensures that the required fonts are loaded before rendering the PDF.

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
  Inject,
} from '@syncfusion/ej2-react-pdfviewer';

function Default() {
  let viewer;

  // Load Google Fonts using Web Font Loader
  React.useEffect(() => {
    if (window.WebFont) {
      window.WebFont.load({
        google: {
          families: ['Roboto:300,400,700', 'Caveat:300,400,700'], // Add required fonts
        },
        loading: function () {
          console.log('Fonts are being loaded');
        },
        active: function () {
          console.log('Fonts have been rendered');
        },
        inactive: function () {
          console.error('Failed to load fonts');
        },
      });
    }
  }, []);

  // Event fired when the document is loaded in the viewer
  const documentLoad = (args) => {
    const formFields = viewer.retrieveFormFields();
    const field = formFields[0];  // Assuming we're working with the first form field (signature)
    if (field) {
      // Set the value and font of the signature field
      field.value = 'Tiago';
      field.fontName = 'Caveat';  // Apply the custom font
      viewer.updateFormFieldsValue(field);
    }
  };

  return (
    <div>
      <div className="control-section">
        {/* Render the PDF Viewer */}
        <PdfViewerComponent
          ref={(scope) => {
            viewer = scope;
          }}
          id="container"
          documentLoad={documentLoad}
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
          style={{ height: '640px' }}
          signatureFieldSettings={{
            typeSignatureFonts: ['Caveat'],  // Specify custom font for signature fields
          }}
        >
          <Inject
            services={[
              Toolbar,
              Magnification,
              Navigation,
              LinkAnnotation,
              BookmarkView,
              ThumbnailView,
              Print,
              TextSelection,
              TextSearch,
              Annotation,
              FormFields,
              FormDesigner,
              PageOrganizer,
            ]}
          />
        </PdfViewerComponent>
      </div>
    </div>
  );
}

export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Understanding Form Field Management

By utilizing the retrieveFormFields method, you can manage the content and appearance of the form fields, including signature fields. The font name (fontName) is updated based on the custom font that has been loaded.

const documentLoad = (args) => {
  const formFields = viewer.retrieveFormFields();
  const field = formFields[0];  // Assuming the first field is a signature field
  if (field) {
    field.value = 'Tiago';
    field.fontName = 'Caveat';  // Apply custom font
    viewer.updateFormFieldsValue(field);
  }
};

Styling and Customization

You can further customize the appearance of signature fields and other form fields by modifying their properties using updateFormFieldsValue(). This function can be used to update properties like the value, font, color, and more.

Key Features Used in the Code

WebFont Loader: The WebFont.load() method from the window.WebFont object is used to load Google Fonts. In this case, we are loading the “Roboto” and “Caveat” fonts, which are then applied to the signature fields in the PDF.
Signature Font Configuration: The signatureFieldSettings property allows you to specify the fonts that should be applied to signature fields. Here, we’re using the “Caveat” font for signatures.
Form Field Update: Once the document is loaded, we retrieve the form fields and apply the “Caveat” font to the first signature field. You can expand this logic to handle multiple signature fields if needed.

Sample Link:

You can access the complete sample via our GitHub Sample Repository

Conclusion:

I hope you found this article helpful in learning how to load custom fonts for pre-existing signature fields in Syncfusion’s React PDF Viewer. By using the Web Font Loader to load Google Fonts and applying them through the signatureFieldSettings property, you can customize the font used for signatures in PDF documents. This solution helps maintain a consistent brand identity or personal preference in signature styles.

You can refer to React PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)