SfSignature using Google Font

[Jason]

Hi Team

We are looking at moving on Syncfusion for a new product we are looking to develop and just had one question before I can get the purchase approval across the line.

I see there are some customisation options on the new Signature component for Blazor but I cannot see in the documentation where you can add a custom font for the DrawAsync feature (where you can generate the signature from text).

We would like to use a Google font for the signature (one that looks a bit more like a signature) but it appears from the documentation that we can only use the handful that are provided.

How can we actually have the signature rendered by a Google font (if it is possible)?

Thanks in advance, the Blazor Syncfusion components look great!

[Gayathri KarunaiAnandam]

Hi Jason, 

 

We have checked your requirement and the google font will be loaded after we performed operation with canvas, and this is behavior of canvas element. To overcome this issue, we need to use webfontloader which loads the google font when it is available. 

 

Please find the below GitHub link for further analysis. 

https://github.com/typekit/webfontloader 

 

For your reference, we have prepared a sample and attached the same. In that we have used below code snippets to load the google fonts. 

 

_Host.cshtml 

 

<script> 

     WebFontConfig = { 

          google:{ families: ['Roboto', 'Pangolin', 'Quicksand', 'Montserrat', 'Inspiration', 'Teko'] } 

     }; 

 

     function loadWebFonts() { 

         var wf = document.createElement("script"); 

         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js'; 

         wf.async = 'true'; 

         document.head.appendChild(wf); 

     } 

</script> 

 

 

Index.razor: 

 

protected override void OnInitialized() 

{ 

    var lDotNetReference = DotNetObjectReference.Create(this); 

    JS.InvokeVoidAsync("loadWebFonts", lDotNetReference); 

} 

 

 

Sample - https://www.syncfusion.com/downloads/support/forum/173609/ze/Signature_google_font-2138428251 

Regards, 

Gayathri K