Skip to content

Commit e085eb3

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1001842: Updated missing custom font changes
1 parent 6232e8e commit e085eb3

1 file changed

Lines changed: 80 additions & 19 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md‎

Lines changed: 80 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,98 @@
11
---
22
layout: post
3-
title: Add custom fonts to the PDF Viewer using the PDF document | Syncfusion
4-
description: Learn how to add custom fonts using the PDF document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: Add custom fonts in Angular PDF Viewer | Syncfusion
4+
description: Learn how to add and load custom TTF fonts for documents displayed in the Angular PDF Viewer using the customFonts property.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# How to add custom fonts to the PDF viewer used in the PDF document
11+
# Add Custom Fonts to PDF Forms in Angular PDF Viewer
1212

13-
To use custom fonts in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the
14-
**customFonts** property, which accepts an array of font names.
13+
The Syncfusion **Angular PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system.
14+
Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments.
1515

16-
The following steps are used to customize the selection border.
16+
## When dynamic fonts are used
17+
Dynamic fonts are currently used in the following scenarios:
18+
- **Text annotations** — When users enter text annotations that use non standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
19+
- **PDF forms** — When users fill form fields that rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.
1720

18-
**Step 1:** Add the custom TTF font files to the resource URL path referenced in your application. For example, place the custom TTF files in the ej2-pdfviewer-lib folder, which will serve as the resource URL path.
21+
## How Custom Fonts Work
22+
The custom font workflow in the PDF Viewer is as follows:
23+
- Place the required **TrueType Font (TTF)** files in the resource directory used by the viewer.
24+
- Specify the font names using the customFonts property.
25+
- The specified fonts become available for:
26+
- Rendering form field content
27+
- Editing text in form fields
28+
- Saving and downloading the PDF with embedded fonts
1929

20-
**Step 2:** The following code snippet are how you can add custom fonts to the PDF viewer.
30+
## Steps to Add Custom Fonts
2131

22-
```typescript
32+
### Add TTF Font Files
33+
1. Place the TTF font files in the resource path used by the PDF Viewer (for example, the ej2-pdfviewer-lib folder).
34+
2. Fonts can be referenced in either of the following ways:
35+
- **Relative path**
36+
Example:
37+
calibri.ttf
38+
fallback-fonts/calibri.ttf
39+
- **Absolute URL**
40+
Fonts can be hosted on a server and referenced using a fully qualified URL. Ensure that the hosting server has **CORS** enabled.
2341

24-
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
25-
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
42+
### Configure Custom Fonts in the PDF Viewer
43+
Specify the required font names in the customFonts property.
2644

27-
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
28-
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
45+
{% tabs %}
46+
{% highlight ts tabtitle="Standalone" %}
47+
import { Component, OnInit } from '@angular/core';
48+
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
49+
MagnificationService, ThumbnailViewService, ToolbarService,
50+
NavigationService, TextSearchService, TextSelectionService,
51+
PrintService, FormDesignerService, FormFieldsService,
52+
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
2953

30-
let viewer: PdfViewer = new PdfViewer();
31-
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
32-
viewer.customFonts = ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
33-
viewer.appendTo("#pdfViewer");
54+
@Component({
55+
selector: 'app-container',
56+
// specifies the template string for the PDF Viewer component
57+
template: `<div class="content-wrapper">
58+
<ejs-pdfviewer
59+
id="pdfViewer"
60+
[documentPath]="document"
61+
[resourceUrl]="resource"
62+
[customFonts]="customFonts"
63+
style="height:640px;display:block">
64+
</ejs-pdfviewer>
65+
</div>`,
66+
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
67+
ThumbnailViewService, ToolbarService, NavigationService,
68+
TextSearchService, TextSelectionService, PrintService,
69+
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
70+
})
71+
export class AppComponent implements OnInit {
72+
public document: string = window.location.origin + "/assets/pdfsuccinctly.pdf";
73+
public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
74+
public customFonts: string[] = [
75+
'simsun.ttc','sumsinb.ttf','arial/arialbd.ttf','arial/arial.ttf','BKANT.TTF',
76+
'calibri.ttf','GARA.TTF','GARAIT.TTF','msgothic.ttc','trebuc.ttf','wingding.ttf'
77+
];
78+
ngOnInit(): void {
79+
}
80+
}
81+
{% endhighlight %}
82+
{% endtabs %}
3483

35-
```
84+
N>Ensure that the font file names match the specified font names.
3685

37-
By following these steps, you can successfully integrate and use custom fonts in your PDF documents displayed in the EJ2 PDF Viewer.
86+
## Supported Form Fields
87+
Custom fonts can be applied to the following form field types:
88+
- [TextBox](../forms/manage-form-fields/create-form-fields#textbox)
89+
- [ListBox](../forms/manage-form-fields/create-form-fields#listbox)
90+
- [DropDown](../forms/manage-form-fields/create-form-fields#dropdown)
91+
92+
## Notes and Limitations
93+
- 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.
94+
- The same content displays correctly in the **Syncfusion PDF Viewer**.
95+
96+
## To avoid rendering issues:
97+
- Use an appropriate font size that fits within the form field.
98+
- Increase the size of the form field before saving or downloading the PDF.

0 commit comments

Comments
 (0)