Change Fonts

• Basics
  • Standard 14 fonts
• Change the document font
• Use a custom font
  • Add a custom font
  • Set the document font
  • Example - Add a custom font family to SurveyPDF
• Where to find a font for a certain language?
• How to convert a ttf file to a base64 string?

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

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

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.

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.

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.

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");

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.

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

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.

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.