New Font Strategy and Usage in Foxit PDF SDK for Web

Background

Foxit PDF SDK for Web lets developers customize fonts to meet application needs. When the front end introduces new fonts that are not listed in the SDK engine’s font information, font matching can be inaccurate and document text may render with the wrong font. To address this, pass all front-end font information (family name, style, and so on) to the SDK engine. During rendering, the engine can match document fonts against that list and display documents correctly.

Configure the font information file

The SDK provides a fontInfoPath configuration parameter so you can define a custom font list. See the example below.

Generate the font information list file

The SDK includes a font information generator tool (in /server/gen-font-info in the SDK package) to create the font list file.

The file mainly includes: family name, sub-family name, face index, PostScript name, code page, and related fields.

How to use

• The /external folder in the SDK package includes some open-source fonts. The SDK can generate a font information file named fileInfo.csv from those fonts.

• If you use custom fonts, generate a new file such as fileInfoNew.csv, or append custom font entries to the existing fileInfo.csv.

• With this font strategy, use PDFView.setJRFontMap together with fontInfoPath.

Family name

Font matching uses the font family name, which corresponds to column F in fileInfo.csv and is case-sensitive.

Example

const pdfui = new PDFUI({
    viewerOptions: {
        jr: {
            fontPath: '../external/brotli',
            fontInfoPath: '../external/brotli/fontInfo.csv',   / Set the path for the font information file.
            licenseSN,
            licenseKey,
            brotli:{
                core:false
            },
        },
    },
    customs: {
    },
    appearance,
    renderTo: '#pdf-ui',
    fragments: [],
    addons: []
});
// Add custom fonts
var fontMaps = [
    {
        nameMatches: [/Arial/i],
        glyphs: [
            {
                / bold: -1,
                flags: -1 ,
                url: 'http://<hostname>/unitTest/font/ARIAL.TTF'
            }
        ],
        charsets: [0]
    }
]
pdfui.getPDFViewer().then(function (viewer) {
    viewer.setJRFontMap(fontMaps)
})

Notes

In hand tool mode, when rich text is copied from the browser and pasted into PDFViewer, the SDK adds it as a Typewriter annotation. Text copied from the browser often uses system font stacks such as -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, and sans-serif. For this feature, specify fonts for the target platform so the SDK font engine can recognize them. Otherwise, the engine may not know which font the application uses, and pasted content may not display correctly.

By default, the SDK uses Dengxian Light on Windows and PingFangSC on Mac for this feature. Load those fonts through the same custom font workflow as other third-party fonts.