@needle-tools/engine/src/engine/webcomponents/fonts.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

declare type LoadFontOptions = {
    element?: HTMLElement | DocumentFragment,
    loadedCallback?: () => void,
}

export function loadFont(url: string, opts?: LoadFontOptions) {
    const element = opts?.element || document.head;
    // Workaround for font loading not being supported in ShadowDOM:
    // Add font import to document header.
    // Note that this is slower than it could be, ideally the font would be prefetched,
    // but for that it needs to be in the actual document and not added by JS.
    const elements = Array.from(element.querySelectorAll(`link[rel=stylesheet][href*='${url}']`));
    if (elements.length <= 0) {
        const fontLink = document.createElement("link");
        fontLink.href = url;
        fontLink.rel = "stylesheet";
        element.appendChild(fontLink);
        elements.push(fontLink);
    }

    if (opts?.loadedCallback) {
        for (let i = 0; i < elements.length; i++) {
            if (opts?.loadedCallback) {
                const fontLink = elements[i] as HTMLLinkElement;
                fontLink.addEventListener("load", opts.loadedCallback);
            }
        }
    }
}


/** Ensure the fonts that needle engine uses are loaded */
export function ensureFonts() {
    loadFont("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
}

// add to document head AND shadow dom to work
// using a static font because the variable font is quite large
// eslint-disable-next-line no-secrets/no-secrets
export const iconFontUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block";
// const fontUrl = "./include/fonts/MaterialSymbolsOutlined.css"; // for offline support