Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How do I handle unloaded fonts when fetching text node properties
    Figma REST API handle unloaded fonts fetch text node properties check missing fonts figma.loadFontAsync Figma API tutorial


How do I handle unloaded fonts when fetching text node properties


To handle unloaded fonts when fetching text node properties using the Figma REST API, you need to check if the required fonts are loaded before attempting to access the text properties. Here's how you can do it:

1. Fetch the text nodes using the "GET file nodes" endpoint:

javascript
const response = await axios.get(`https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID`, config);
const textNode = response.data.nodes[NODE_ID];

2. Check if the text node has any missing fonts using the `hasMissingFont` property:

javascript
if (textNode.hasMissingFont) {
  // Load the required fonts first
  await figma.loadFontAsync(textNode.fontName);
}

3. If there are missing fonts, load them using the `figma.loadFontAsync()` function:

javascript
await figma.loadFontAsync(textNode.fontName);

This will ensure that the required font is loaded before attempting to access the text properties.

4. Now you can safely access the text properties:

javascript
console.log(textNode.fontSize);
console.log(textNode.fontName);

By following these steps, you can handle unloaded fonts when fetching text node properties using the Figma REST API. First, check if there are any missing fonts, then load them using `figma.loadFontAsync()`, and finally access the text properties[2][3].

Remember to handle any errors that may occur during the font loading process, as the `figma.loadFontAsync()` function returns a Promise that can reject if the font fails to load[2].

Citations:
[1] https://forum.figma.com/t/get-figma-fonts/4079
[2] https://www.figma.com/plugin-docs/api/api-errors/
[3] https://forum.figma.com/t/unsure-how-to-load-fonts/11528
[4] https://forum.figma.com/t/function-for-setting-text-and-loading-fonts/6290
[5] https://www.figma.com/plugin-docs/api/figma/