Documentation Docs
Documentation Docs

Change Fonts

API to use:
Change fonts:
DocOptions.fontName
Load fonts:
DocController.addFont()
Load fonts (OBSOLETTE):
DocOptions.base64Normal
DocOptions.base64Bold


Basics

The SurveyJS PDF Generator library uses a third-party jsPDF library to render surveys as PDF files.

Standard 14 fonts

PDF documents rendered by jsPDF support the following fonts (also known as the standard (or base) 14 PDF fonts):

  • Helvetica (default)
    in: "normal", "bold", "oblique", and "bold oblique"

  • Courier
    in: "normal", "bold", "oblique", and "bold oblique"

  • Times
    in: "normal", "bold", "oblique", and "bold oblique"

  • Symbol

  • ZapfDingbats

For more details, see jsPDF sources.

Note:
The standard 14 PDF fonts contain a limited set of glyphs, but their advantage is that they don't need to be embedded into a document. These fonts are intended to be installed on a client machine and most PDF readers support them.

Change a document font

Use the fontName property to specify a document's font.

If you want to change the default font, set the fontName property to the required font family name.
You don't need to explicitly specify a font variation (such as "normal" or "bold"). SurveyPDF applies a required font variation if it is available within a document for the specified font family.

For instance, to render a PDF document using the Courier font family, set fontName to "Courier".

function saveSurveyToPdf(filename, surveyModel) {
    var options = {
        // ...
        fontName: 'Courier',
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.save(filename);
}

See also:
The fontSize property.

Use a custom font

Standard 14 PDF fonts are ASCII-encoded and they may not include specific glyphs (for example, UTF-8 encoded glyphs).

With the SurveyJS PDF Generator library, you can add a custom font. The custom font will be used to render survey PDF texts. For example, if you want to render Chinese text in a survey file, add a font which contains Chinese glyphs.

To use a custom font for a SurveyPDF document, perform the following steps:

  • Add a custom font using the static DocController.addFont method.
  • Set the document font using the IDocOptions.fontName property.

Add a custom font

Use the DocController.addFont method to add a custom font to a PDF document.

  • addFont()
    public static addFont(fontName: string, base64: string, fontStyle: 'normal' | 'bold' | 'italic' | 'bolditalic')

This method does the following:

  • Loads a font face as a base64-encoded string.
  • Specifies the font variation (such as "normal" or "bold") for the loaded font face.
  • Specifies a label (a custom font family name/alias) for the loaded font face. The label uniquely identifies the custom font in a collection of fonts available within a document. Use this label to set the fontName property in document options.

An example of the DocController.addFont method call:

SurveyPDF.DocController.addFont("myFont", "<<base64-encoded string>>", "normal");

Method parameters:

  • fontName
    A dynamically created label that identifies the custom font. This label is used as a custom font family name. Example: "myFont".

  • base64
    A base64-encoded string that represents the content of a custom font's .ttf file to embed.

  • fontStyle
    A font variation of a custom font. The _fontStyle may represent a combination of the font weight and font style. Possible values: "normal", "bold", "italic", "bolditalic".
    SurveyPDF generally uses two font variations for survey element texts: "bold" is used for texts of titles, "normal" - for texts of other elements.

Note: You may need to apply additional font variations to custom HTML content of HTML survey questions).

The following sample code demonstrates how to:

  • Use the addFont method to add two custom fonts in "normal" and "bold" variations;
  • Combine fonts into a custom font family. "myRoboto" is used as a font family label.
var fontRobotoThin = "<<base64-encoded string for Roboto-Thin.ttf>>";
var fontRobotoMedium = "<<base64-encoded string for Roboto-Medium.ttf>>";

SurveyPDF.DocController.addFont("myRoboto", fontRobotoThin, "normal");
SurveyPDF.DocController.addFont("myRoboto", fontRobotoMedium, "bold");

Set the document font

Use the IDocOptions.fontName to render survey PDF texts with a custom font. Set this property to a custom font family identifier - the fontName parameter used in the addFont method.

function saveSurveyToPdf(filename, surveyModel) {

    var options = {
        // ...
        fontName: 'myRoboto',
    };
    // ...
}

Note: SurveyPDF uses a specified font to render survey PDF contents. If your survey is a multi-language and, for example, includes English and Chineese texts, consider a font which includes glyphs for all languages used withing a survey.

Example - Add a custom font family to SurveyPDF

The following example generates a survey PDF file with four Roboto fonts embedded into the document as a custom font family named 'myRoboto'.

The Roboto-Thin and Roboto-Medium font variations are used for two main font variations - "normal" and "bold". SurveyPDF uses these font variations to render all survey elements.
The Roboto-LightItalic and Roboto-BlackItalic represent italic font variations - "normal italic" and "bold italic". SurveyPDF uses these font variations to render HTML content of survey HTML questions).


var json = {
    "questions": [
    // A set of survey questions including questions of the HTML type
    // ...
    ]
};

window.survey = new Survey.Model(json);
// ...

// Integrate base64-encoded representations of custom fonts into a page
var fontRobotoThin = "<<base64-encoded string for Roboto-Thin.ttf>>";
var fontRobotoMedium = "<<base64-encoded string for Roboto-Medium.ttf>>";
var fontRobotLightItalic = "<<base64-encoded string for Roboto-LightItalic.ttf>>";
var fontRobotoBlackItalic = "<<base64-encoded string for Roboto-BlackItalic.ttf>>";

// Embed custom Roboto fonts in four variations:
SurveyPDF.DocController.addFont("myRoboto", fontRobotoThin, "normal");
SurveyPDF.DocController.addFont("myRoboto", fontRobotoMedium, "bold");
SurveyPDF.DocController.addFont("myRoboto", fontRobotoLightItalic, "italic");
SurveyPDF.DocController.addFont("myRoboto", fontRobotoBlackItalic, "bolditalic");

function saveSurveyToPdf(filename, surveyModel) {

    var options = {
        // Specify the font family used to render a document:
        fontName: 'myRoboto',
    };
    
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.save(filename);
}

Online Example
Custom font family

Custom fonts

How to obtain a font for a specific language

To integrate a custom font to a PDF document, obtain a font .TTF (a regular TrueType font) file.

You can use online resources to search for and download language- and lettering style specific fonts. For example, check the following resources:

  • Google Noto Fonts
    The Noto font family - a Google-developed collection of free fonts, which aims to support all languages.

  • Google Fonts
    A library of more than a thousand free and open source font families.

How to convert a TTF file to a base64 string

You can use the following online tools to convert a .ttf font file to a base64 string.

  • jsPDF's Font Converter
    A font converter developed by authors of the jsPDF library.
    Accepts a .ttf file and creates a .js file. The .js file contains font content as a base64 encoded string and additional jsPDF-specific code.
    To obtain a font's base64 representation, open the downloaded .js file and copy the value of the font variable (var font = "...").

  • GiftOfSpeed's File to Base64 Encoder
    The simplest way to encode web files to a base64 string. Upload a .ttf file and copy the generated string.

Copyright © 2022 Devsoft Baltic OÜ. All rights reserved.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.