How to use a custom font in a WebApp?

AppStudio
1

Hello everyone, I would like to know if it is possible to add a custom font to my WebApp project in ABB AppStudio. The font is already installed on my local PC, but I need to know the proper way to import or reference it as an asset so it renders correctly on the FlexPendant; any guidance would be greatly appreciated!

2

Yes, you can directly add the following JavaScript code to the onMounted event of a component like the Page component:

if (!document.getElementById("custom-font-style")) {
    const style = document.createElement("style");
    style.id = "custom-font-style";

    style.textContent = `
        @font-face {
            font-family: "MyCustomFont";
            src: url("./fonts/MyFont.woff2") format("woff2");
            font-weight: normal;
            font-style: normal;
        }
    `;

    document.head.appendChild(style);
}

image
image1211×675 46.4 KB

However, please note that if the font is only installed on your computer, it may not be available on the FlexPendant.

You need to locate the actual font file (such as .woff2, .woff, or .ttf) and include it in the deployed WebApp folder. Then, reference that file using the correct relative path in your CSS.

For reference, you can look at how AppStudio loads its own icon fonts in index.html, as shown in the screenshot. It references an iconfont.css file, which loads the corresponding font files from the WebApp directory.

image
image1286×602 38.4 KB

This is just an example of how font resources can be organized and referenced. You will need to adjust the file paths according to your own WebApp structure.

3

Hey Yitong!

Thank you very much for the help.

If you don’t mind, could you explain a bit more about this? I don’t think I fully understand it yet.

Thanks in advance!