Skip to main content
Question

Missing fonts in prototype - Interactive components


Show first post

Claire_Z
  • September 27, 2024

Thank you Nellya!! You really enlighten me!!! 👏 👏


Emmanuel8

Hello, can we get an update on this?


Alessandro_Suraci1

Just started seeing this too. It happens with Google Fonts, randomly.
In my prototype I have a set of variables (font family, weight, size) and 3 modes. When in prototype I switch mode some fonts randomly get replaced.


Michelle_Trostel1

Can we get an update on this issue? This problem makes it difficult to share with clients that do not have these fonts installed. Almost makes sharing prototypes useless.


Jannick_Utke

Same for me, font switches to another weight in prototype.
Is there a solution?


Peter_Angelov2

Hello everyone,

I encountered the same issue during remote usability testing of the Figma prototype in (respondent’s) browser. In our scenario, we have some text string which needs to be changed to another string using a variable and as the interaction was triggered, “some missing fonts were replaced” and on the top, not every text using this variable was updated (which caused logical issues in the test scenario).

This seems to be problem when using local fonts, and apparently as the browser uses “canvas” element where everything is drawn by javascript, Figma prototype in browser can not change the text to other string on the fly. I filed a bug report and hopefully will hear about it soon.

As a workaround, we did the following: since we only need the text to be either “string A” or “string B”, we created a component with both strings as variants. Then, using interaction we only change that component variant, not the string variable. That way Figma can “draw” the text layer (in the background probably just vector/outline of the original text).

I can update you with information from Figma team once I hear back about the bug report.


Reply


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