Interactive components glitching for people without fonts installed

Hi everyone, I recently had a problem with interactive animated components when user testing them, since our users didn’t have the custom fonts installed on their machines the animations ended up glitching.

I “fixed it” by sending the fonts for them to install.

Since this is not normal behaviour with this feature, I’d like to report this as a bug if possible.

Thanks a lot, loving the feature btw.

15 Likes

I’m running into a same/similar error. We have our custom typefaces installed via “Shared Fonts” feature.
On the initial load component displays correctly, after an interaction that involves switching a variant (i.e. hover) I get a message “Some missing fonts were replaced” and the typefaces switches to some fallback.

2 Likes

Same issue here. Any insight from @Figma ?

Having the same issue. We use FontAwesome for icons and they’ve all turned into text rather than icons for those who don’t have FontAwesome installed.

Update: Installing font doesn’t solve the issue.

2 Likes

Update: the problem still happening even after installing the fonts.

2 Likes

Thanks for flagging this! We’re working on a fix, and we’ll roll it out in the next week or so.

6 Likes

Hello everyone,
I have the same problem with de fonts and the interactive components with de variants function.

I think this is an amazing feature! Waiting for a solution :slight_smile:

Thank you so much!

Hey there!
Any news about this @Susan_Wang? I need to run a test this week and my fonts within the variants still not charging :scream:

This is an awesome feature btw!

Also experiencing the same problem in my prototypes.
Loving interactive components so far except for this issue.

Hope for a swift fix.

Thank you!!!

This Thursday is the scheduled time for this fix to roll out. We won’t be able to force-install a font on another designer’s computer (e.g. in case they don’t have the permission), so we resorted to a fallback font to minimize glitch. Let us know if it’s not quite the fix you imagined.

2 Likes

Same issue here. This is especially noticeable with font awesome icons. In some components—not all for some reason—and often with the hover/mouse enter states, the font awesome icon turns into the text (for example an up arrow icon will become the phrase “up-arrow”) and it really breaks the design. I tried reinstalling the font on my end, making sure it was the most updated version, and this did not help.

1 Like

At least on my end I keep having the same issue :confused:

The problem persists

2 Likes

The issue still persists. Like some others, we use FontAwesome for all our icons. We can’t share prototypes with the rest of the business anymore as they look broken. It’s only on components with interactions. The font works fine until you interact.

1 Like

The problem remains in the ios mirror app, when is it fixed? I need to submit a prototype but it keeps animating badly

Thanks everyone—if the font is only local to your computer, we won’t be able to calculate all the different states for other users. We are incrementally adding ways for this to work in more cases. Sorry for the trouble, and thank you for the feedback! Especially useful to hear about the font-awesome use case.

1 Like

Fonts in interactive components were working perfectly before starting May!!

5 Likes

Hello @Andrew_Heine, as @Camilo_Bolivar mentions this was not an issue when the beta for interactive components was released. If this changed due to performance —or other— reasons, is this what we should expect from the final release? Thanks!

2 Likes

I’m finding this is still happening; hopefully this will be fixed soon because many of my files prior to two or so weeks ago were working great. Now I am going back and finding work arounds for the issue (like outlining fonts, etc), but if this is fixed that would be awesome.

Is this going to change on the final release? I work on an agency so sharing fonts with every client is not super doable, Would be nice to know if doing these is reliable in the long term.