Weird box like characters

[oguh43]

Description

I defined a custom keycap like so: {label: "σ", latex: "\\sqrt{\\frac{1}{#?-1} \\sum_{i=1}^{#?} (#?_i - \\overline{#?})}", class: "tex"}. Clicking it, produces this weird thing: Appending it to DOM via function below produces correct output

mfe.addEventListener("change", ()=>{
        console.log(mfe.value, convertLatexToMarkup(mfe.value))
        history.innerHTML = `<p>${convertLatexToMarkup(mfe.value)}</p>` + history.innerHTML
        mfe.value = ""

    })

However, as soon as the blank spaces are filled in with values, it once again produces wrong output:

Also the sqrt looks weird, the top line is offset even as a keycap:

Could this be because MathLive fails to load all fonts?

GET file:///E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_Main-Regular.woff2 net::ERR_FILE_NOT_FOUND
E:\Egithub\IVS_projekt_2\node_modules\mathlive\dist\mathlive.min.js:2813 MathLive 0.98.6: The math fonts could not be loaded from "file:///E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts" {cause: DOMException: A network error occurred.}
Qr @ E:\Egithub\IVS_projekt_2\node_modules\mathlive\dist\mathlive.min.js:2813
await in Qr (async)
connectedCallback @ E:\Egithub\IVS_projekt_2\node_modules\mathlive\dist\mathlive.min.js:3065
(anonymous) @ E:\Egithub\IVS_projekt_2\src\beta_preload.js:27
/E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_Math-Italic.woff2:1 

GET file:///E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_Math-Italic.woff2 net::ERR_FILE_NOT_FOUND
/E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_Math-BoldItalic.woff2:1 

 GET file:///E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_Math-BoldItalic.woff2 net::ERR_FILE_NOT_FOUND
/E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_SansSerif-Regular.woff2:1 

 GET file:///E:/Egithub/IVS_projekt_2/node_modules/mathlive/dist/fonts/KaTeX_SansSerif-Regular.woff2 net::ERR_FILE_NOT_FOUND

Even though they are present in the specified directories...

Actual Behavior

Weird, non-showable characters producing boxes

Expected Behavior

Beautifull representation of standard deviation

Environment

MathLive version 0.98.6 Operating System Windows 11

Browser Electron - chromium based

[oguh43]

The broken characters that are generated are: Two times One time

Charecters in question:  and 

[arnog]

yes, this is because the required fonts cannot be loaded. Since you are using Electron, you may need to do some specific setups in your environment to allow access to the font files.

[arnog]

ntp

[oguh43]

Only fonts installed via npm are these:

[oguh43]

Npm refused to install all fonts due to a broken external package