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