Skip to content

986927: Revamped custom-font md and other issues for Vue and TS Platforms #1640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 28, 2025
Merged

986927: Revamped custom-font md and other issues for Vue and TS Platforms #1640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c8b0387
986927: revamped custom-font md and other issues
MuralidharanGSF4527 Oct 27, 2025
38e221a
986927: resolved CI issues and added custom fonts
MuralidharanGSF4527 Oct 27, 2025
157b242
986927: resolved CI issues
MuralidharanGSF4527 Oct 27, 2025
fc702f3
986927: resolved CI issues
MuralidharanGSF4527 Oct 27, 2025
3db069b
986927: reverted the changes
MuralidharanGSF4527 Oct 27, 2025
3122fda
986927: resolved CI issues
MuralidharanGSF4527 Oct 28, 2025
2ccf0ab
986927: updated the titles
MuralidharanGSF4527 Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions Document-Processing-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -794,6 +794,8 @@
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/accessibility">Accessibility</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar">Toolbar</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/navigation">Navigation</a></li>
<li>Toolbar Customization
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
Expand All @@ -804,12 +806,12 @@
<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/custom-toolbar">Custom Toolbar</a></li>
</ul>
</li>
<li>Interactive PDF Navigation
<li><a href="/document-processing/pdf/pdf-viewer/vue/navigation">Interactive PDF Navigation</a>
<ul>
<a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/page-navigation">Page </a>
<a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/bookmark-navigation">Bookmark</a>
<a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/page-thumbnail-navigation">Page Thumbnail</a>
<a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/hyperlink-navigation">Hyperlink Navigation</a>
<li><a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/page-navigation">Page</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/bookmark-navigation">Bookmark</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/page-thumbnail-navigation">Page Thumbnail</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/hyperlink-navigation">Hyperlink Navigation</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/magnification">Magnification</a></li>
Expand Down Expand Up @@ -851,6 +853,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pdf/organize-pdf-events">Events</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pdf">Organize Pages</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/print">Print</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/download">Download</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/event">Events</a></li>
Expand Down Expand Up @@ -1102,6 +1105,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/save-pdf-file/to-azure-active-directory">From Azure Active Directory</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar">Toolbar</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/navigation">Navigation</a></li>
<li>Toolbar Customization
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
Expand All @@ -1112,12 +1117,12 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/custom-toolbar">Custom Toolbar</a></li>
</ul>
</li>
<li>Interactive PDF Navigation
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/navigation">Interactive PDF Navigation</a>
<ul>
<a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/page-navigation">Page </a>
<a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation">Bookmark</a>
<a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation">Page Thumbnail</a>
<a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/hyperlink-navigation">Hyperlink Navigation</a>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/page-navigation">Pages</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation">Bookmark</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation">Page Thumbnail</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/interactive-pdf-navigation/hyperlink-navigation">Hyperlink Navigation</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/magnification">Magnification</a></li>
Expand Down Expand Up @@ -1160,6 +1165,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf/organize-pdf-events">Events</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf">Organize Pages</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print">Print</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/download">Download</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/event">Event</a></li>
Expand Down
2 changes: 1 addition & 1 deletion Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,7 +819,7 @@ The [keyboardCustomCommands](https://ej2.syncfusion.com/javascript/documentation
When it triggers
- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.

Refer to [Keyboard interaction](./accessibility.md#keyboard-interaction) for details about adding and handling custom shortcut keys.
Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys.
Example:

```typescript
Expand Down
22 changes: 11 additions & 11 deletions Document-Processing/PDF/PDF-Viewer/javascript-es6/feature-module.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@ The PDF Viewer features are provided as individual modules, allowing application
Available PDF Viewer modules:

* [**Toolbar**](./toolbar-customization): Built-in toolbar for user interaction.
* [**Magnification**](./magnification.md): Perform zoom operations for a better viewing experience.
* [**Navigation**](./interactive-pdf-navigation/page-navigation.md): Navigate across pages.
* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation.md): Navigate within the document or to external destinations via hyperlinks.
* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation.md): Navigate within the document using page thumbnails.
* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation.md): Navigate using document bookmarks (table of contents).
* [**TextSelection**](./textselection.md): Select and copy text from the document.
* [**TextSearch**](./text-search.md): Search for text across the document.
* [**Print**](./print.md): Print the entire document or specific pages directly from the browser.
* [**Annotation**](./annotations/text-markup-annotation.md): Add and edit annotations.
* [**FormFields**](./form-designer/create-programmatically.md): Work with form fields in the document.
* [**FormDesigner**](./form-designer/create-programmatically.md): Add or edit form fields in the document.
* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience.
* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages.
* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation): Navigate within the document or to external destinations via hyperlinks.
* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails.
* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents).
* [**TextSelection**](./textselection): Select and copy text from the document.
* [**TextSearch**](./text-search): Search for text across the document.
* [**Print**](./print): Print the entire document or specific pages directly from the browser.
* [**Annotation**](./annotations/text-markup-annotation): Add and edit annotations.
* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.

> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance.
Refer to the following table:
Expand Down
100 changes: 50 additions & 50 deletions Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,54 +12,54 @@ domainurl: ##DomainURL##

The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are listed below.

* [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-ts.md)
* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value.md)
* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-ts.md)
* [How to customize the annotation selectors?](./how-to/annotation-selectors.md)
* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings.md)
* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations.md)
* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-ts.md)
* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance.md)
* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-ts.md)
* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md)
* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core.md)
* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service.md)
* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu.md)
* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-ts.md)
* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts-ts.md)
* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color.md)
* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation.md)
* [How to disable the context menu?](./how-to/disable-context-menu.md)
* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering.md)
* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation.md)
* [How to get the download start event?](./how-to/download-start-event-ts.md)
* [How to enable or disable the local storage?](./how-to/enable-local-storage-ts.md)
* [Enable the resizer for text markup annotation?](./how-to/enable-resize.md)
* [How to enable or disable the text selection?](./how-to/enable-text-selection-ts.md)
* [How to export the PDF pages as images?](./how-to/export-as-image-ts.md)
* [How to extract text from the PDF document?](./how-to/extract-text-completed-ts.md)
* [How to extract text from a specific region?](./how-to/extract-text-option-ts.md)
* [How to extract text from the PDF document?](./how-to/extract-text-ts.md)
* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-ts.md)
* [How to get the base64 string of the loaded document?](./how-to/get-base64-ts.md)
* [How to get the page information of the loaded document?](./how-to/get-page-info-ts.md)
* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text.md)
* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode.md)
* [How to import annotations from the PDF document?](./how-to/import-annotations.md)
* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-ts.md)
* [How to load a PDF document in PDF Viewer?](./how-to/load-document.md)
* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-ts.md)
* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-ts.md)
* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail.md)
* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation.md)
* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts.md)
* [How to print the PDF document silently?](./how-to/print-document.md)
* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error.md)
* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts.md)
* [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url.md)
* [How to select annotations in multi page?](./how-to/select-multi-page-annotations.md)
* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-ts.md)
* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts.md)
* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts.md)
* [How to unload the PDF document from the viewer?](./how-to/unload-document.md)
* [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-ts)
* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value)
* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-ts)
* [How to customize the annotation selectors?](./how-to/annotation-selectors)
* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings)
* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations)
* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-ts)
* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance)
* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-ts)
* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts)
* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core)
* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service)
* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu)
* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-ts)
* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts-ts)
* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color)
* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation)
* [How to disable the context menu?](./how-to/disable-context-menu)
* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering)
* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation)
* [How to get the download start event?](./how-to/download-start-event-ts)
* [How to enable or disable the local storage?](./how-to/enable-local-storage-ts)
* [Enable the resizer for text markup annotation?](./how-to/enable-resize)
* [How to enable or disable the text selection?](./how-to/enable-text-selection-ts)
* [How to export the PDF pages as images?](./how-to/export-as-image-ts)
* [How to extract text from the PDF document?](./how-to/extract-text-completed-ts)
* [How to extract text from a specific region?](./how-to/extract-text-option-ts)
* [How to extract text from the PDF document?](./how-to/extract-text-ts)
* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-ts)
* [How to get the base64 string of the loaded document?](./how-to/get-base64-ts)
* [How to get the page information of the loaded document?](./how-to/get-page-info-ts)
* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text)
* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode)
* [How to import annotations from the PDF document?](./how-to/import-annotations)
* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-ts)
* [How to load a PDF document in PDF Viewer?](./how-to/load-document)
* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-ts)
* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-ts)
* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail)
* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation)
* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts)
* [How to print the PDF document silently?](./how-to/print-document)
* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error)
* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts)
* [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url)
* [How to select annotations in multi page?](./how-to/select-multi-page-annotations)
* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-ts)
* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts)
* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts)
* [How to unload the PDF document from the viewer?](./how-to/unload-document)

8 changes: 8 additions & 0 deletions Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ domainurl: ##DomainURL##

# Add custom fonts in PDF Viewer

The TypeScript PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.

## Integrating Custom Font Collections into Form Fields in PDF Viewer

To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, place the TTF files in the resource URL path referenced by the viewer and specify their names through the customFonts property (string array). These fonts will then be available for loading, editing, and saving form fields in the PDF.

To use custom fonts in the Syncfusion PDF Viewer, add the custom TTF files to the resource URL directory and configure the viewer to load them. Specify font file names using the `customFonts` property as an array of names.

Steps to add custom fonts
Expand Down Expand Up @@ -47,3 +53,5 @@ pdfviewer.appendTo('#PdfViewer');
{% endtabs %}

These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.

> Note: If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion PDF Viewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
Loading