We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to add new fonts family to hand written signature modal

I need to add new fonts in the hand written signature modal, in the 'Type' tab. specifically here:



I use ASP.NET Core and Angular


7 Replies

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 14, 2022 01:24 PM

Hi David,


Kindly refer the below sample to add new fonts family to handwritten signature modal in the ‘Type’ tab.


Sample: https://stackblitz.com/edit/angular-51hahr?file=app.component.html,app.component.ts,index.html,main.ts


Code Snippet:

// Add the fonts stylesheet in the index.html file

 

  <link rel="stylesheet" rel='nofollow' href=https://fonts.googleapis.com/css?family=Allura >

  <link rel="stylesheet" rel='nofollow' href=https://fonts.googleapis.com/css?family=Tangerine>

  <link rel="stylesheet" rel='nofollow' href=https://fonts.googleapis.com/css?family=Sacramento>

  <link rel="stylesheet" rel='nofollow' href=https://fonts.googleapis.com/css?family=Inspiration>


// Use that font family here

 

        pdfviewer.handWrittenSignatureSettings.typeSignatureFonts = ['Allura','Tangerine','Sacramento','Inspiration'];

 



Regards,

CCM Karthik



DR David Restrepo replied to Chinnamunia Karthik Chinna Thambi October 14, 2022 03:31 PM

Thanks for reply!


What changes I have to do in the backend ASP.NET Core?


The example does not work, in the modal appears the four default fonts but not the new fonts....



CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 17, 2022 12:55 PM

Hi David,


You need not do the changes in the backend, Just refer the required stylesheet of the font family and add that font family in the typeSignatureFonts list as in the previous update to add the required font family in the handwritten signature modal. We have shared the video for your reference.


Sample: https://stackblitz.com/edit/angular-51hahr-s6xcia?file=app.component.html,app.component.ts,index.html,package.json


Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video3152077652.zip


Downloaded file: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf-820077184.zip


Regards,

CCM Karthik



DR David Restrepo October 20, 2022 09:41 AM

Thanks for reply!


The example works but I have another problem:

When I add a handwritten signature from 'Type' tab and I save the document, the signature is get out of the bounds. See images.


I add the signature:


When I save the document and I open the pdf



I use ASP.NET Core and Ang



CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 21, 2022 01:53 AM

Hi David,

 

We were unable to reproduce the reported issue with the provided details. The signature is not getting out of bounds, We have shared the video recording for this.


Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/handwritten-37090207.zip

 

Kindly revert to us with a replication procedure or video recording of the reported issue if you have any concerns. This will be helpful for us to analyze further.

 

And also kindly ensure you are using the latest version(v20.3.0.50)



Regards,
CCM Karthik



DR David Restrepo October 24, 2022 11:54 AM

Thanks for reply!


We flatten the annotation in the document with this code


foreach (PdfLoadedPage loadedPage in loadedDocument.Pages)
{
//Flatten all the annotations in the page
loadedPage.Annotations.Flatten = true;
}


maybe this causes the problem.



CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 26, 2022 08:09 AM

Hi David,


We were unable to reproduce the reported issue with the provided details. We have shared the sample in client-side and server-side in which we have tried to reproduce the issue in the below link,


Client-side sample: https://stackblitz.com/edit/angular-51hahr-s6xcia?file=app.component.html,app.component.ts,index.html,package.json

Server-side sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversidesample-917002761.zip
Downloaded document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/handwrittendocument409528401.zip


Steps to run the sample:


  • Run the server sample
  • Add the server URL in the Angular sample "serviceUrl"
  • Now load the document. The handwritten signature is not getting out of bounds



Kindly try this and revert to us with a modified sample, code snippet, replication procedure, and more details about the reported issue if you have any concerns. This will be helpful for us to analyze further and provide the details.


Regards,
CCM Karthik


Loader.
Live Chat Icon For mobile
Up arrow icon