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

# Background

Foxit PDF SDK for Web enables users to use custom third-party fonts. However, when the underlying engine lacks font information, font matching rules may lead to incorrect font usage. To address this, Foxit PDF SDK for Web must furnish the font information list supported by the frontend to the underlying engine. This ensures that the engine can correctly match and utilize the corresponding fonts during font rendering.

# 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.

# 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 →