loadFontAsync not resolving for custom font?

Plugin and Widget API Questions
1

I am trying to programmatically create text styles for my design system. The source of truth is a JS object that contains design token data.

The problem is when I try to set the font (“SF Pro Text”, which is installed on the computer)… as shown below, when i run loadFontAsync for this font, the promise seems to never resolve.

async function createNewTextStyle(token) {
    // Style does not yet exist, so create it
    const newStyle = figma.createTextStyle();

    // the new text style is preloaded with Roboto, so we need to load that
    await figma.loadFontAsync(newStyle.fontName);
    
    // This is the font i want to set my text style to.
    // it seems that this promise never resolves (or errors).
    await figma.loadFontAsync({
        family: 'SF Pro Text',
        style: 'Regular',
    });

// Set the properties of the text style
    newStyle.fontName = {
        family: 'SF Pro Text',
        style: 'Regular',
    };
    newStyle.name = designToken.name;
    newStyle.fontSize = designToken.value;
    newStyle.lineHeight = { value: designToken.lineHeight, unit: 'PIXELS' };
}
2

What error are you getting? Have you tried restarting Figma? Using another font (like Roboto) for testing?

1 Like
3

No error… just nothing happens. If I do it with roboto it works as expected. Have tried with multiple other fonts too and it also never resolves

4

Sorry, i was out earlier when responding. When I say it never resolves or errors, I mean it doesn’t resolve or come back with any kind of error. It’s as though the function just “hangs”.

When doing it with Roboto, it works as expected, but all other fonts do not work, they all just hang.

Can you confirm that this works for you?

5

Are you sure the issue is in that line specifically? Have you tried isolating this function in a new plugin and seeing if it works? I just tried and it seems to be working. I don’t have SF fonts installed so I tried with other local fonts.

There is one issue though. You are passing token in the function and not using it, while you are using designToken which is not passed to the function. The function gets stuck because of that.

Found it by debugging with console log:

async function createNewTextStyle(token) {
    // Style does not yet exist, so create it
    const newStyle = figma.createTextStyle();

    // the new text style is preloaded with Roboto, so we need to load that
    await figma.loadFontAsync(newStyle.fontName);
    
    // This is the font i want to set my text style to.
    // it seems that this promise never resolves (or errors).
    console.log('hi')
    await figma.loadFontAsync({
        family: 'Helvetica',
        style: 'Regular',
    });
    console.log('hi 2')

// Set the properties of the text style
    newStyle.fontName = {
        family: 'Helvetica',
        style: 'Regular',
    };
    console.log('hi 3')
    newStyle.name = designToken.name; // gets stuck here
    newStyle.fontSize = designToken.value;
    newStyle.lineHeight = { value: designToken.lineHeight, unit: 'PIXELS' };
    console.log('hiii 4') // this line never runs!!!!!!!!!
}

createNewTextStyle().then(n => figma.closePlugin('Done!'))

image

1 Like
6

Oh yes! That’s it. I am calling figma.closePlugin(); before waiting the promise to resolve. So it was killing the function before it resolved.

Thank you - this is indeed not a bug but my fault :slight_smile:

1 Like
7

So the plugin doesn’t hang for you? For me it stays open and doesn’t throw any errors because designToken is not defined.

8

No sorry that was my renaming bars for this post so it’s more obvious what the car was. token should be supplied as a parameter to the function and renamed to designToken.

For context, I was actually calling this function n times in a loop that went through an array of font styles from my design tokens. I’ve instead done the font loading as your sample above, then called my style setting in the then() part

9

Got it! Great that your issue is solved now.

1 Like