# Strategy and Usage of the New Font in Foxit PDF SDK for Web

# Background

Foxit PDF SDK for Web allows developers to customize fonts to meet personalized needs. However, when the frontend introduces new fonts, if there is no corresponding record in the font information list of the SDK underlying engine, there will be problems with inaccurate font matching, causing the text in the document to display in the wrong font. To solve this problem, we need to pass all the font information supported by the frontend, including font name, style, etc., to the SDK underlying engine. In this way, the SDK underlying engine can find the matching font from the font information list provided by the frontend according to the font information in the document when rendering the document, thus ensuring the correct display of the document.

# How to configure a font information file

Foxit PDF SDK for Web provides a configuration parameter called fontInfoPath which allows users to customize the font information list based on their requirements. Users can refer to the example below for specific usage.

# How to generate a font information list file

Foxit PDF SDK for Web provides a font information generation tool (located in the /server/gen-font-info folder of the package) to create a font information list file.

This file primarily includes the font information, such as family name, sub-family name, face index, postscript name, code page, and etc.

# How to use

Foxit PDF SDK for Web provides some open-source fonts available in the /external folder of the package. Therefore, Foxit PDF SDK for Web will generate a font information file named fileInfo.csv based on these open-source fonts.
If users need to use custom fonts, they can generate a new font information file, such as fileInfoNew.csv. Alternatively, they can also append their custom font information to the existing fileInfo.csv file.
It is necessary to use PDFView.setJRFontMap in combination with this font strategy.

Note: In the process of font matching, we rely on the "family name" of the font, which corresponds to column F in the fileInfo.csv file, and it 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)
})

# Note

In the Hand mode, when directly copying rich text from a browser and pasting it into PDFViewer, Foxit PDF SDK for Web will add it as a Typewriter annotation. However, most of the fonts copied from browsers are often system fonts, such as "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif". It is recommended to specify a specific font based on the system platform when using this feature, so that the font engine of Foxit PDF SDK for Web can better recognize it. Otherwise, the font engine won't know what font is being used at the application layer, potentially resulting in the inability to display the copied and pasted content correctly.

Therefore, when using this feature, Foxit PDF SDK for Web defaults to using the "Dengxian Light" font on Windows platform and the "PingFangSC" font on Mac platform. The application layer needs to follow the process of loading third-party fonts to incorporate the necessary fonts.

← I18n Entries Resources Management Generate a CSV file with font information →