Skip to content

Commit c9bc245

Browse files
GokulprasathVenkatachalamGokulprasathVenkatachalam
authored
Merge pull request #1489 from syncfusion-content/984373-pv-form
984373: Added the custom font section for the form designer
2 parents fdbc3cf + 4d092ec commit c9bc245

17 files changed

+232
-118
lines changed

‎Document-Processing-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -552,7 +552,9 @@
552552
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/overview">Overview</a></li>
553553
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/create-programmatically">Programmatic Support for Form Designer</a></li>
554554
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/ui-interactions">UI Interactions in Form Designer</a></li>
555+
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/form-designer-in-mobile-view">Form Designer in Mobile View</a></li>
555556
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/events">Events in Form Designer</a></li>
557+
<li><a href="/document-processing/pdf/pdf-viewer/blazor/form-designer/custom-font">Custom Font</a></li>
556558
</ul>
557559
</li>
558560
<li> <a href="/document-processing/pdf/pdf-viewer/blazor/form-filling">Form Filling</a></li>

‎Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md‎

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -488,106 +488,6 @@ The following image shows selecting a checkbox field in the Blazor PDF Viewer (S
488488
N> Enable the form field interaction mode before selecting a field.
489489
For details, see [Interaction mode](./overview).
490490

491-
## Custom Font Support for Form Fields
492-
493-
The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties.
494-
495-
### Integrating Custom Font Collections into Form Fields in SfPdfViewer
496-
497-
To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving.
498-
499-
```cshtml
500-
@page "/"
501-
502-
<SfPdfViewer2 @ref="pdfViewer" Height="100%" Width="100%" DocumentPath="@DocumentPath" FontFamilies="@FontFamilies">
503-
<PdfViewerEvents Created="@Created"></PdfViewerEvents>
504-
</SfPdfViewer2>
505-
506-
@code {
507-
SfPdfViewer2? pdfViewer;
508-
509-
// Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar
510-
internal string[] FontFamilies { get; set; } = { "Helvetica", "Courier", "Symbol", "Times New Roman", "Allura", "Playwrite CA", "Ojuju" };
511-
512-
private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
513-
514-
public void Created()
515-
{
516-
// Use FallbackFontCollection to save the custom font
517-
// Maps the font family name to its corresponding TTF file as a memory stream
518-
pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf")));
519-
pdfViewer!.FallbackFontCollection.Add("Playwrite CA", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/PlaywriteCA-Regular.ttf")));
520-
pdfViewer!.FallbackFontCollection.Add("Ojuju", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Ojuju-Regular.ttf")));
521-
}
522-
}
523-
```
524-
![Custom Font Support for Form Fields in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_for_form_fields.png)
525-
526-
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields).
527-
528-
## Custom Font Support for Signature Fields
529-
530-
The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties.
531-
532-
### Integrating Custom Font Collections into Signature Fields in SfPdfViewer
533-
534-
To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving.
535-
536-
```cshtml
537-
@page "/"
538-
539-
<SfPdfViewer2 @ref="Viewer" DocumentPath="@DocumentPath" Height="100%" Width="100%">
540-
<PdfViewerEvents Created="@Created"></PdfViewerEvents>
541-
<PdfViewerSignatureDialogSettings SignatureFonts="signatureFonts" />
542-
</SfPdfViewer2>
543-
544-
@code {
545-
SfPdfViewer2? Viewer;
546-
547-
private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf";
548-
549-
// Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar
550-
public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" };
551-
552-
public void Created()
553-
{
554-
// Use FallbackFontCollection to save the custom font
555-
// Maps the font family name to its corresponding TTF file as a memory stream
556-
pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf")));
557-
pdfViewer!.FallbackFontCollection.Add("Tangerine", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Tangerine-Regular.ttf")));
558-
pdfViewer!.FallbackFontCollection.Add("Sacramento", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Sacramento-Regular.ttf")));
559-
pdfViewer!.FallbackFontCollection.Add("Inspiration", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Inspiration-Regular.ttf")));
560-
}
561-
}
562-
```
563-
![Custom Font Support for Signature Field in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_signature_fields.png)
564-
565-
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field).
566-
567-
When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment.
568-
569-
The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources.
570-
571-
```cshtml
572-
<script>
573-
window.addEventListener('DOMContentLoaded', () => {
574-
var fontFamily = ["Allura, Tangerine, Sacramento, Inspiration"];
575-
for (var fontIndex=0; fontIndex<fontFamily.length; fontIndex++)
576-
{
577-
document.fonts.load(`16px ${fontFamily[fontIndex]}`).then(() => {
578-
console.log(`Font "${fontFamily[fontIndex]}" loaded successfully.`);
579-
}).catch(err => {
580-
console.error(`Failed to load font "${font}":`, err);
581-
});
582-
}
583-
});
584-
</script>
585-
```
586-
587-
>**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources.
588-
589-
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links).
590-
591491
## See also
592492

593493
* [Overview of Form Designer](./overview)

‎Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
layout: post
3+
title: Custom Font Support for Form Designer in SfPdfViewer | Syncfusion
4+
description: Learn how to integrate the custom font collection for form fields in the Syncfusion Blazor SfPdfViewer component.
5+
platform: document-processing
6+
control: SfPdfViewer
7+
documentation: ug
8+
---
9+
10+
# Custom Font Support for Form Fields
11+
12+
The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties.
13+
14+
## Integrating Custom Font Collections into Form Fields in SfPdfViewer
15+
16+
To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving.
17+
18+
```cshtml
19+
@page "/"
20+
21+
<SfPdfViewer2 @ref="pdfViewer" Height="100%" Width="100%" DocumentPath="@DocumentPath" FontFamilies="@FontFamilies">
22+
<PdfViewerEvents Created="@Created"></PdfViewerEvents>
23+
</SfPdfViewer2>
24+
25+
@code {
26+
SfPdfViewer2? pdfViewer;
27+
28+
// Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar
29+
internal string[] FontFamilies { get; set; } = { "Helvetica", "Courier", "Symbol", "Times New Roman", "Allura", "Playwrite CA", "Ojuju" };
30+
31+
private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
32+
33+
public void Created()
34+
{
35+
// Use FallbackFontCollection to save the custom font
36+
// Maps the font family name to its corresponding TTF file as a memory stream
37+
pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf")));
38+
pdfViewer!.FallbackFontCollection.Add("Playwrite CA", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/PlaywriteCA-Regular.ttf")));
39+
pdfViewer!.FallbackFontCollection.Add("Ojuju", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Ojuju-Regular.ttf")));
40+
}
41+
}
42+
```
43+
![Custom Font Support for Form Fields in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_for_form_fields.png)
44+
45+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields).
46+
47+
## Custom Font Support for Signature Fields
48+
49+
The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties.
50+
51+
### Integrating Custom Font Collections into Signature Fields in SfPdfViewer
52+
53+
To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving.
54+
55+
```cshtml
56+
@page "/"
57+
58+
<SfPdfViewer2 @ref="Viewer" DocumentPath="@DocumentPath" Height="100%" Width="100%">
59+
<PdfViewerEvents Created="@Created"></PdfViewerEvents>
60+
<PdfViewerSignatureDialogSettings SignatureFonts="signatureFonts" />
61+
</SfPdfViewer2>
62+
63+
@code {
64+
SfPdfViewer2? Viewer;
65+
66+
private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf";
67+
68+
// Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar
69+
public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" };
70+
71+
public void Created()
72+
{
73+
// Use FallbackFontCollection to save the custom font
74+
// Maps the font family name to its corresponding TTF file as a memory stream
75+
pdfViewer!.FallbackFontCollection.Add("Allura", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Allura-Regular.ttf")));
76+
pdfViewer!.FallbackFontCollection.Add("Tangerine", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Tangerine-Regular.ttf")));
77+
pdfViewer!.FallbackFontCollection.Add("Sacramento", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Sacramento-Regular.ttf")));
78+
pdfViewer!.FallbackFontCollection.Add("Inspiration", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Inspiration-Regular.ttf")));
79+
}
80+
}
81+
```
82+
![Custom Font Support for Signature Field in Blazor SfPdfViewer](../form-designer/form-designer-images/custom_font_support_signature_fields.png)
83+
84+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field).
85+
86+
When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment.
87+
88+
The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources.
89+
90+
```cshtml
91+
<script>
92+
window.addEventListener('DOMContentLoaded', () => {
93+
var fontFamily = ["Allura, Tangerine, Sacramento, Inspiration"];
94+
for (var fontIndex=0; fontIndex<fontFamily.length; fontIndex++)
95+
{
96+
document.fonts.load(`16px ${fontFamily[fontIndex]}`).then(() => {
97+
console.log(`Font "${fontFamily[fontIndex]}" loaded successfully.`);
98+
}).catch(err => {
99+
console.error(`Failed to load font "${font}":`, err);
100+
});
101+
}
102+
});
103+
</script>
104+
```
105+
106+
>**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources.
107+
108+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links).
109+
110+
## See also
111+
112+
* [Load Custom Fonts in PDF Viewer](../faqs/how-to-load-custom-font-pdfium)

0 commit comments

Comments
 (0)