Syncfusion AI Assistant

How can I help you?

Add Custom Fonts to PDF Forms in React PDF Viewer

25 Feb 20265 minutes to read

The Syncfusion React PDF Viewer supports loading, editing, and saving custom fonts in form fields such as TextBox, ListBox, and DropDown fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system.
Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments.

When dynamic fonts are used

Dynamic fonts are currently used in the following scenarios:

  • Text annotations — When text annotations use non-standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
  • PDF forms — When form fields rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.

How Custom Fonts Work

The custom font workflow in the PDF Viewer is as follows:

  • Place the required TrueType Font (TTF) files in the resource directory used by the viewer.
  • Specify the font names using the customFonts property.
  • The specified fonts become available for:
    • Rendering form field content
    • Editing text in form fields
    • Saving and downloading the PDF with embedded fonts

Steps to Add Custom Fonts

Add TTF Font Files

  1. Place the TTF font files in the resource path used by the PDF Viewer (for example, the ej2-pdfviewer-lib folder).
  2. Fonts can be referenced in either of the following ways:
    • Relative path
      Example:
      calibri.ttf
      fallback-fonts/calibri.ttf
    • Absolute URL
      Fonts can be hosted on a server and referenced using a fully qualified URL. Ensure that the hosting server has CORS enabled.

Configure Custom Fonts in the PDF Viewer

Specify the required font names in the customFonts property.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';

import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
  Inject
} from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = React.useRef(null);

  return (
    <div className="control-section">
      <PdfViewerComponent
        ref={viewerRef}
        id="PdfViewer"
        documentPath= {window.location.origin + "/assets/pdfsuccinctly.pdf"}
        resourceUrl = {window.location.origin + "/assets/ej2-pdfviewer-lib"}
        customFonts={[
          'simsun.ttc',
          'sumsinb.ttf',
          'arial/arialbd.ttf',
          'arial/arial.ttf',
          'BKANT.TTF',
          'calibri.ttf',
          'GARA.TTF',
          'GARAIT.TTF',
          'msgothic.ttc',
          'trebuc.ttf',
          'wingding.ttf'
        ]}
        style=
      >
        <Inject
          services={[
            Toolbar,
            Magnification,
            Navigation,
            Annotation,
            LinkAnnotation,
            ThumbnailView,
            BookmarkView,
            TextSelection,
            TextSearch,
            FormFields,
            FormDesigner,
            PageOrganizer
          ]}
        />
      </PdfViewerComponent>
    </div>
  );
}

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

NOTE

Ensure that the font file names match the specified font names.

Supported Form Fields

Custom fonts can be applied to the following form field types:

Notes and Limitations

  • If text rendered using a custom font exceeds the form field’s bounds, the downloaded PDF may render incorrectly in some third party PDF viewers.
  • The same content displays correctly in the Syncfusion PDF Viewer.

To avoid rendering issues:

  • Use an appropriate font size that fits within the form field.
  • Increase the size of the form field before saving or downloading the PDF.