How can I use custom font in Angular 6?

[IngoManthey]

Hi,
For more than 6 weeks I try to install this in my Angular project. I started 2 attempts but did not get any further with both.
1.) I worte a default_vfs.js file with:
(function (jsPDFAPI) { "use strict"; jsPDFAPI.addFileToVFS('PTSans-Regular.ttf', base64 encoded ttffile); }
I save it in src/assests/js
My problem here with is unknown, how I integrate this file into Angular and how I must call these, so that the fonts are loaded.

2.) My 2 idea is to create a service that inserts the fonts into the document.
`import * as jsPDF from 'jspdf';

@Injectable()
export class JsPDFFontService {
AddFont(doc: jsPDF) {
doc.addFileToVFS('PTSans-Regular.ttf', base64);
}
}`
Here I unfortunately get the message "addFileToVFS is not present in the type jsPDF".

Can someone help me here?

[IngoManthey]

Hi,

I add in the index.html:

<script src="js/jspdf.min.js"></script> <script src="js/default_vfs.js"></script>

But that did not work. Does somebody has any idea????

[bufke]

I've never been able to get custom fonts to work. I believe it is intended to work like this

doc.addFileToVFS('PTSans-Regular.ttf', base64);
doc.addFont('PTSans-Regular.ttf', 'PTSans', 'normal')

If using Typescript just ignore the missing function declaration like this (doc as any).addFileToVFS...

This will fix your VFS error, however I just get No unicode cmap for font next. Perhaps with your font it will work however.

[Uzlopak]

@bufke
I reworked our font converter. Should now work easier.

[SwamiManju143]

please display any full document for this.
i tried but some what error. Tamil font not working in jspdf in angular 4.
give me the explanation step by step. please..

[IngoManthey]

Hi,
here the code:
import { Injectable } from '@angular/core';

import * as jsPDF from 'jspdf';

@Injectable()
export class JsPDFFontService {
regularNormal = 'font in base64';
regularBold = 'font in base64';
AddFontArimo(doc: jsPDF) {
(doc as any).addFileToVFS('arimo.regular-normal.ttf', this.regularNormal);
(doc as any).addFileToVFS('arimo.regular-bold.ttf', this.regularBold);
doc.addFont('arimo.regular-normal.ttf', 'arimo', 'normal');
doc.addFont('arimo.regular-bold.ttf', 'arimo', 'bold');
doc.setFont('arimo');
}
}

in my component
import { JsPDFFontService } from '../../tip-services/jsPdf-font.service';
import * as jsPDF from 'jspdf';

export class printTest {}

doc: jsPDF;

constructor( private jsPDFFontService: JsPDFFontService) { }

print() {
	this.doc = new jsPDF('p', 'mm', 'a4');
	this.jsPDFFontService.AddFontArimo(this.doc);
}

}

I hope its help you.

regards Ingo

[jolisM]

@IngoManthey thanks for your code. Did you arrive to add a new font in your Angular app ? Thanks !!

[IngoManthey]

@jolisM
I use my code and it´s work fine.

regards Ingo