loadFontAsync Multiple Fonts (MEMORY ERROR)

Plugin and Widget API
1

Hi Figma devs :smiley:

I’m trying to load all fonts before updating layer character.

const fontArray = [
  { family: 'Roboto', style: 'Regular' },
  { family: 'Roboto', style: 'Bold' },
  { family: 'Font Awesome 5 Pro', style: 'Solid' },
  { family: 'Font Awesome 5 Pro', style: 'Light' },
];

fontArray.map(async (font) => {
  await figma.loadFontAsync(font);
});

Unfortunately, I get a memory error. Can somebody help, please?
Thanks in advance

CleanShot 2021-04-21 at 15.08.33@2x
CleanShot 2021-04-21 at 15.08.33@2x1798×350 136 KB

2

You can’t use async in a map so this works synchronously and likely the fonts aren’t loaded before you try to change the characters. Also all these four calls would happen at the same time, a memory error may be caused by trying to load multiple fonts at the same time.

3

Why not load all fonts without manually specifying them?

selection.forEach(async (font) => {
await figma.loadFontAsync(font.fontName as FontName);
});
4

I got it working already :grinning: Thank you for the quick responses.

I’m doing it like this:

await figma.loadFontAsync(node.fontName as FontName);
node.characters = value;
3 Likes
5

Smashing! This took me an age to figure out myself haha.

6

Hi!

I got the fonts working like this:

// Function for loading all the needed fonts
const loadFonts = async () => {

  await figma.loadFontAsync({ family: "Work Sans", style: "Regular" })
  await figma.loadFontAsync({ family: "Work Sans", style: "Medium" })
  await figma.loadFontAsync({ family: "Work Sans", style: "Bold" })

  console.log("Awaiting the fonts.")

}

// Load the fonts by running the function
loadFonts().then(() => {

  // Make them useful
  doSomethingElseWithThem()
  console.log("Fonts fetched and ready to go!")

})

Maybe this helps someone!

1 Like