Loading fonts in a plugin

To use fonts from Google Fonts in the plugin UI, you must connect them using the <link> tag in HTML or @import/@font-face in CSS. This way it will load and be available for use.

Loading fonts using the loadFontAsync method has no effect and does not relate to the plugin UI. This method is used in code.js to work with the Figma editor.

hey, thank you for your answer.
I’m not talking about Google fonts here, i’ve used figma.listAvailableFontsAsync();

this is my code.js

async function loadAvailableFonts() {
    try {
        const allFonts = await figma.listAvailableFontsAsync();
        const usableFonts = allFonts.filter(font => !font.fontName.family.startsWith('.'));
        figma.ui.postMessage({ type: 'load-fonts', fonts: usableFonts });
    } catch (error) {
        console.error('Error loading fonts:', error);
        figma.ui.postMessage({ type: 'load-fonts-error', error });
    }
}

figma.showUI(__html__, { width: 960, height: 600 });
loadAvailableFonts();

figma.ui.onmessage = async msg => {
    if (msg.type === 'load-font') {
        const fontToLoad = { family: msg.fontFamily, style: 'Regular' };
        try {
            await figma.loadFontAsync(fontToLoad);
            figma.ui.postMessage({ type: 'font-loaded', fontFamily: msg.fontFamily, status: 'success' });
        } catch (error) {
            console.error('Error loading font:', error);
            figma.ui.postMessage({ type: 'font-loaded', fontFamily: msg.fontFamily, status: 'error', error: error });
        }
    }
};

So it loads all the fonts available, but I can’t apply them if they are not installed in my “general” font folder, but they work on a regular Figma’s canva.

For example, a font I’ve never installed, “Irish Grover” is loaded, it’s a Figma font, but I can’t use it in the plugin. Only in the Figma’s canva.

No, this method only outputs a list of fonts. Figma doesn’t provide the font files themselves to work with, only an array of objects:

[
    {
        fontName: {
            family: 'Inter',
            style: 'Regular'
        }
    },
    {
        fontName: {
            family: 'Inter',
            style: 'Bold'
        }
    },
    …
]

The list of available fonts includes system fonts and Google Fonts.

I’ll repeat again:

This also applies to the listAvailableFontsAsync method.

And once again:

To use any font in the plugin interface, you must have access to the font file itself. Therefore, if the font is not installed on your system, you need to either install it or load it from the Internet.

Ho I see now, thank you for your patience, I’m not a developer, so there are few subtleties I did not understand, I get it now.