Change the font family for type signatures in Vue

28 Feb 20262 minutes to read

Change the font family in the type signature of the Syncfusion® PDF Viewer by adding a custom CSS stylesheet to the document and applying the desired font family to the type signature element. Include the Google Fonts link in the HTML head section to apply the font.

Signature field property

The PDF Viewer supports changing fonts for Signature and Initial fields using the typeSignatureFonts and typeInitialFonts properties.

Step 1: Follow the steps in the Getting Started guide to create a simple PDF Viewer sample.

Step 2: Use the following code to apply custom fonts to the Signature field.

```html
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allura" >
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sacramento">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inspiration">
```

```
<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :signatureFieldSettings="signatureFieldSettings"> </ejs-pdfviewer>
  </div>
</template>

import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, DisplayMode, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  data () {
return {
	documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
	signatureFieldSettings:{
    typeSignatureFonts:['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>
```

Initial field property

Use the following code to apply custom fonts to the Initial field.

```html
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allura" >
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sacramento">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inspiration">
```
```
<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :initialFieldSettings="initialFieldSettings"> </ejs-pdfviewer>
  </div>
</template>

import {
    PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, DisplayMode, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  data () {
return {
	documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
	initialFieldSettings:{
    typeInitialFonts:['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>
```

Implementing this enables use of custom fonts in form-field signature and initial fields.