PdfMake Ionic 4 angular custom font to support Amharic language

Question

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
    myFont: {
        normal: '../../../../assets/fonts/hiwua.ttf',
        bold: '../../../../assets/fonts/hiwua.ttf',
        italics: '../../../../assets/fonts/hiwua.ttf',
        bolditalics: '../../../../assets/fonts/hiwua.ttf',
    }
}
const docDefinition = {
    content: [ ....... ],
    defaultStyle: {
    font: 'myFont'
}

how can I add my custom font and support the Amharic language?

Answer 1

Make sure you follow the steps in the pdfmake guide for custom client-side font support:

1. Place your font files (.ttf) in /node_modules/pdfmake/examples/fonts/
2. From the /node_modules/pdfmake/ directory, run npm install then gulp buildFonts
3. Import the generated /build/vfs_fonts.js/ file. My imports look like this (based on this answer):

import * as pdfMakeConfig from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMakeConfig.vfs  = pdfFonts.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';

Important: In defining pdfMake.fonts, just use the filename, not the full path. Mine looks like this:

pdfMakeConfig.fonts = {
    ethiopic : {
        normal: 'NotoSansEthiopic-Regular.ttf'
    }
};

Then you can use it in document descriptions like this:

{
    text: 'foo',
    font: 'ethiopic'
}