Unsure how to load fonts

Plugin and Widget API Questions
1

Hi, I’m trying to load a font to use in a simple text box, but keep getting this error:

Cannot write to node with unloaded font “Roboto Regular”. Please call figma.loadFontAsync({ family: “Roboto”, style: “Regular” }) and await the returned promise first.

This is my code:

async function createNewTextStyle() {
  // 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: 'Roboto',
      style: 'Regular',
  });

// Set the properties of the text style
  newStyle.fontName = {
      family: 'Roboto',
      style: 'Regular',
  };
}
createNewTextStyle();

I’m pretty new to JavaScript so I’m sure I’ve done something wrong, would love some help on this.

2

This function looks good to me (but can’t test now). Which line are you getting this error at? It seems like it doesn’t come from this function at all, as “writing to node” implies you are changing characters on the text element on canvas. Also I’m pretty sure you don’t need to load the default font of the style to change it, only the new font needs to be loaded.

3

Right okay I think that makes sense since I don’t think it’s coming from the function. Why would the error occur when I try to change characters on the text element. For reference this is where I call the text element.

const title1 = figma.createText();
  title1.fills = [{type: "GRADIENT_LINEAR", gradientTransform: [[1,0,0], [0,1,0]], gradientStops: [{position: 0, color: {r: 0.094, g: 0.098, b: 0.235, a: 1}}, {position: 1, color: {r: 0.149, g: 0.156, b: 0.380, a: 1}}]     }];
  title1.characters = ("Cover Title");
  title1.fontSize = (100);
4

You don’t load fonts at all in this piece of code, so this would explain the error (unless you have font loading code before it somewhere of course). You need to await for the fonts loading function to finish and then you can change the characters.

5

Thanks for getting back to me Gleb!

I have code (the code in the initial post) before this code, wouldn’t that load and await it?

6

No. Just like you are awaiting for fonts to load (await figma.loadFontAsync), you need to await for the createNewTextStyle function to finish. Note that for that to work, it needs to be called inside the async function, not in the global scope since await only works inside async functions (but if you are using TypeScript, it should warn you about that).

Also if you removed the default font loading like I advised, you need to bring it back somewhere since you are not applying the style you just created and loaded the font for to the text you are modifying. So you can even drop that function completely and just load the default font before setting the characters to the text.

7

Okay so this is what I have so far. How do I await the async function to finish?

async function loadFont() {

  await figma.loadFontAsync({
      family: 'Roboto',
      style: 'Regular',
  });

};

(async() => {
  await loadFont()
})();

  const nodes: SceneNode[] = [];

  const title1 = figma.createText();
  title1.fills = [{type: "SOLID", color: {r: 1, g: 1, b: 1}}];
  title1.characters = ("Cover Title");
  title1.fontSize = (100);
  figma.currentPage.appendChild(title1);
  nodes.push(title1);
1 Like
8

Move this line: })(); to the end of this code block.

9

Thanks works now!