Export PDF with different Font not finding new font

Export PDF with different Font not finding new font

JLegaultJLegault Posts: 31Questions: 6Answers: 2

Link to test case: Was unable to re-create un live.datatables.net
Debugger code (debug.datatables.net): ipagad
Error messages shown: Uncaught File 'CourierPrime-Regular.ttf' not found in virtual file system
Description of problem:

I am unable to create html5 buttons on live.datatables.net, but I may just be doing something wrong there.

My main issue is I cannot change the font family that the PDF export is using.

Within my DataTable Creation:

                extend: 'pdfHtml5',
                text: '<i class="far fa-file-pdf fa-lg text-primary"></i>',
                titleAttr: 'Export to PDF',
                className: 'btn-light',
                exportOptions: {
                    columns: [7, 5, 6, 1, 2, 0, 3, 4],
                    orthogonal: 'export',
                    modifier: {
                        selected: false
                customize: function(doc){
                    doc.defaultStyle.font = 'Courier'

Run at window load:

pdfMake.fonts = {
    Courier: {
        normal: 'CourierPrime-Regular.ttf',
        bold: 'CourierPrime-Bold.ttf',
        italics: 'CourierPrime-Italic.ttf',
        bolditalics: 'CourierPrime-BoldItalic.ttf'
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-MediumItalic.ttf'

My vfs_fonts.js file:

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {

I know this isn't exactly a DataTables related issue, more a pdfmake issue, but I followed all the steps found here and I'm still getting the error shown above.

This question has an accepted answers - jump to answer


  • colincolin Posts: 15,094Questions: 1Answers: 2,581

    This thread should help, it's asking the same thing.



  • JLegaultJLegault Posts: 31Questions: 6Answers: 2

    That thread seems to highlight the issue that arises when vfs_fonts.js is included before pdfmake, my includes do not do this.

    <script type="text/javascript" src="common/js/min/pdfmake.min.js?r=<?=$vrs?>"></script>
    <script type="text/javascript" src="common/js/min/vfs_fonts.js?r=<?=$vrs?>"></script>

    I am trying to add an additional font family to the pdfmake options, but it is not applying.

    Is there anywhere in the DataTables library where it might be over-writing my font addition? Based on pdfmake's documentation I think I should have a valid Courier font option but DataTables won't export it.

  • allanallan Posts: 61,003Questions: 1Answers: 9,949 Site admin
    Answer ✓

    The only thing I can thing of is that pdfMake might point to a different instance? If you run $.fn.DataTable.Buttons.pdfMake().vfs on your console, does it show Courier there?

    Failing that, we'd need a link to a test case.


  • JLegaultJLegault Posts: 31Questions: 6Answers: 2


    Running $.fn.DataTable.Buttons.pdfMake().vfs gave me only the Roboto that automatically comes with pdfmake.

    I swapped the order of pdfmake and DataTables in my headers so that my vfs_fonts came after the DataTables js file:

    <script type="text/javascript" src="common/js/min/datatables.min.js?r=<?=$vrs?>"></script>
    <script type="text/javascript" src="common/js/min/pdfmake.min.js?r=<?=$vrs?>"></script>
    <script type="text/javascript" src="common/js/min/vfs_fonts.js?r=<?=$vrs?>"></script>

    My guess is somewhere within the datatables min file it is re-defining the pdfmake.fonts object; not an issue just something to note for anyone else trying to customize pdfmake font family.

This discussion has been closed.