Missing font & style when using variable

Ask the community
1

When a text field with a custom font is tied to a variable, interactively changing the text field causes the font to change to another font (when viewing a flow within the context of a pop-up viewer), sometimes with an erroneous “Missing font” error.

This bug has already lodged, and is infuriating plenty of people, but was automatically closed for no good reason:

Figma: When people take the time to lodge bugs for you, don’t reduce your opportunities to learn from them and provide a better product by closing them when there is no reason to close them.

1 Like
2

Hi there,
Thanks for reaching out to the community and sorry to hear you are having issues with font and styles with variables!

Thank you for flagging this topic. For the context, the topic you linked was automatically closed 30 days after the last reply. Still, I have found another similar topic that I’ve replied, can you try first this workaround and see if this helps below? Some users were able to find a fix.

If you think you have another issue and would like us to investigate your issue, please reach out directly to the support team: here Please also include a copy of your file and share it to support-share@figma.com so we can investigate it further. Thanks!

3

Hello! I’m also having the same error and have spent a HUGE amount of time trying to trouble shoot it. Is there a order of operations that you can recommend? Currently I’m seeing the best results with the following:

  • Set variable [string]
  • Conditional
  • Change to OR Navigate to

Although this isn’t always the case.

4

Hey @Mike_Dunlap ,
Thanks for reaching out to the community! To be transparent, it’s difficult to share a recommendation here without investigating your file, as it can be another specific issue.
To cover some basics, as recommended, if the workaround shared below doesn’t help (Missing font article and this workaround), please reach out directly to the support team with a URL of the file: here. The team can have a deeper look at it and try to replicate. Thank you!

5

Hi Mike,

My understanding (after exploring this in-depth and conversations with Figma Support) is that Figma’s ability to display variable-controlled values that can change, in a custom font, is limited when Figma is not running in Figma Desktop in the full-screen prototype mode.

I continue to encounter this issue in Figma’s web client, in Figma Desktop flow “pop-up” view, and in Figma’s iOS client.

It seems to only be a problem if/when a value presented in a custom font changes. The initial value seems to display just fine.

To get around this limitation for “touch” platform testing, I ended up having to get a Windows Surface tablet and running Figma Desktop & font helper. It is unfortunate that Figma currently has no solution, but given what the company has managed to create so far, I am hopeful that eventually, this problem will have a solution.

See email note below, from Les at Figma support, for the current “last word” confirming the issue.

Best,

-K

From Les, at Figma Support:

Hi Krispin,

Unfortunately, the recommended solution would be to utilize a Google font so the application is able to read and interact with the font as intended. You could try using a custom font that doesn’t have an interaction (just a title, no hovering or clicking), but it is possible that the text might be misaligned.

All in all, if a device or a user doesn’t have the same font installed on their machine locally, they won’t be able to interact with the prototype the way you’ve intended. If the local font remains, Figma may replace the font to Inter and/or shift some of the colors and text settings, which is why the recommendation is to use a similar font from Google fonts.

While I understand this may not be ideal, it is the only way to ensure the interactive components work the way you’ve intended.

If you have any other questions, please let me know.

Best,

Les

1 Like
6

Thanks Les