Skip to main content
Solved

loadFontAsync not resolving for custom font?

Lucas_Arundell

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' };
}

Best answer by Gleb

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

View original

8 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • April 5, 2021

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

Lucas_Arundell
1 person likes this
  • Lucas_Arundell
    Lucas_Arundell
Lucas_Arundell

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

Lucas_Arundell

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?

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • Answer
  • April 5, 2021

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

Eduardo_Viva
1 person likes this
  • Eduardo_Viva
    Eduardo_Viva
Lucas_Arundell

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 🙂

Eduardo_Viva
1 person likes this
  • Eduardo_Viva
    Eduardo_Viva
Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • April 5, 2021

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

Lucas_Arundell

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

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • April 5, 2021

Got it! Great that your issue is solved now.

Lucas_Arundell
1 person likes this
  • Lucas_Arundell
    Lucas_Arundell

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings