Skip to main content

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.

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.


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.


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


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


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 🙂


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 😱


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.


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.


At least on my end I keep having the same issue 😕


The problem persists



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.


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.


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


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!


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.


Hello, this still happening.


I find it only in interactive components via variants.

I use a local font installed on my computer and once you are on the prototype view on another computer, once you trigger any hovering effect, appears a message that says “some mising fonts were replaced”.


Also installing the font on the secondary computer (the one that had not the font installed) doesn’t solve the problem.


We have to disable interactions for now, and it is a bit of a shame as the Interactive components thing is a life changer in many levels!


Please fix this :3


Same here. Hope this will be fixed soon.


Same issue here. Going to have to switch interactive components off for now.


yes! I have the same problem.


in interactive variants I have all fonts in Basier Circle. but when I mirroring on iphone with figma mirror. and using the interactive variants it bugging like this: (The font is replaced by other font what I dont use in my design)






And interactive variants is awesome!


We also use only Type based Icons from Font Awesome. So we’ve disabled all interactions until this issue is properly resolved.


Perhaps when a designer adds a custom font to a file, you could just 1x prompt us with a popup, where we have to agree we have the proper rights and are responsible for any mis-use that may occur.


How is the progress moving forward on resolving this issue? Because we are also still experiencing this problem. Outlining the font is a work-around for user testing, but I really hope it will be solved soon.


Reply