How to Set Font Name When Generating PDF file in JavaScript - ByteScout

How to Set Font Name When Generating PDF file in JavaScript

  • Home
  • /
  • Articles
  • /
  • How to Set Font Name When Generating PDF file in JavaScript

This sample shows how set and change font name when you generate PDF file with BytescoutPDF.js (Bytescout PDF Generator for JavaScript). 
BytescoutPDF.js provides support for built-in PDF fonts.

// function that creates BytescoutPDF instance (defined in BytescoutPDF.js script which have to be included into the same page)
// then calls API methods and properties to create PDF document
// and returns created BytescoutPDF object instance
// this CreatePDF() function is called from Sample.html

function CreatePDF() {

    // create BytescoutPDF object instance
    var pdf = new BytescoutPDF();

    // set document properties: Title, subject, keywords, author name and creator name
    pdf.propertiesSet("Sample document title", "Sample subject", "keyword1, keyword 2, keyword3", "Document Author Name", "Document Creator Name");

    // set page size
    pdf.pageSetSize(BytescoutPDF.A4);

    // set page orientation (BytescoutPDF.PORTRAIT = portrait, BytescoutPDF.LANDSCAPE = landscape)
    pdf.pageSetOrientation(BytescoutPDF.PORTRAIT);

    // add new page
    pdf.pageAdd();

    // set font color in RGB format to 0,0,0 - black color
    pdf.fontSetColor(0, 0, 0);

    // set font size
    pdf.fontSetSize(14);

    // BytescoutPDF.js provides support for built-in PDF fonts
    // which are demonstrated in this sample

    // trying Times-Roman
    pdf.fontSetName('Times-Roman');
    // draw text
    pdf.textAdd(20, 20, 'Hello Times Roman!');

    // trying Helvetica
    pdf.fontSetName('Helvetica');
    // draw text
    pdf.textAdd(20, 60, 'Hello Helvetica!');

    // trying Courier-Bold
    pdf.fontSetName('Courier');
    // draw text
    pdf.textAdd(20, 100, 'Hello Courier!');
    

    // return BytescoutPDF object instance
    return pdf;
}

Generated PDF file with custom font (click to view full size):

Click to view full size

prev
next