Missing fonts in prototype - Interactive components

How can I DM you ? :blush:

Does this happen on initial load or only after certain actions?

I’ve an interactive component with 2 variants. Within it there’s a text element with interaction that toggles between the variants. The component displays the right glyph on load, but breaks into replacement text when I tap on its interaction. It also breaks all other glyphs using the same font (fontawesome) in the component.

I’m only experiencing this on Figma android, both in the prototype and mirroring tab. The desktop app appears to be working properly now.

Do you know if the fonts being replaced are shared fonts uploaded to an organization, or local fonts

Used the desktop app and font service

if you’re willing to share the original file and/or a video of the bug to me, please DM me

Couldn’t find a way to DM :\ Thanks Andrew!

Hello,

I’m trying to do a simple animation on a board, using a smart animate feature.

When finished, I have a problem with my preview on figma mirror or with a link shared (so the board is viewed on safari or chrome on iphone) : The fonts used in the elements of the smart animate are replaced by Arial as soon as I trigger the animation via a trigger box.

Is this a know issue and is there a way to solve it ? (without vectorizing the font…)

Thank you.

This is still an issue for prototype embeds (regardless of browser or platform).
Happens every time when interacting with the interactive components—both “on load” and if there’s no interaction with the interactive component everything looks and behaves fine though.

1 Like

Hello,

I’m having the same problem. Hopefully this bug will be fixed soon

Happening to me too. Figma have added an overlay as a quick fix (well I hope a quick fix), hopefully they can package custom fonts in sooner rather than later as this is causing us a huge issue with senior stakeholders!

Screenshot 2021-09-03 at 10.13.05

Same issue here.

The workaround where selecting the frame before opening prototype mode was working for a while, but since the missing fonts modal in prototype mode was introduced, it doesn’t seem to work at all, the fonts in interactive components get replaced 1-2 seconds after the frame loads up.

My temporary workaround is just to flatten each frame into an image, but this is obviously very limiting, hoping for a solution soon.

Can confirm, same thing happening to me. Offering my left kidney for a fix.

2 Likes

I have the same issue, and the weird thing; with one variant of the component it does work, with the other it doesn’t.

bug

Hmm, I’ve found a fix, I copied the text from the default state to the hovered state, and now it is working again. But they are the same textstyle. Maybe it is something with the fonts / textstyles?

1 Like

Same issue !! :exploding_head:
We know that these interactive components were a beta feature, but it used to work super well!! It’s some kind of regression, could you please fix it? :slightly_smiling_face:
Now, the cost of making it work again on our complex proto is huge!!

omg, I did the “Reload All Tabs” action, after checking the update and having no Update Available.
It seems to work now !! :grinning:

Exact same issue here, some interactive component work perfectly fine and others break for no apparent reason since it’s the same text style and the same interaction :exploding_head:

1 Like

Thanks for your fix. Copying the text box from the default state and then pasting it in the hover state solved the problem for my components as well :hearts:

Having similar issues. Just started to notice them a few days ago. The funny thing is I am literally using Arial. How can it not find Arial. I’ve had these button components working as variants since the beginning of the year, only just now had an issue. I can’t even try to replace the fonts because it doesn’t give me an option, just talks about automatically being replaced. Tried restarting Figma and reloading tabs, did not solve problem. I had to detach all of my buttons to get them to display properly.

Potentially helpful context: I only see the yellow missing font notification when previewing my prototype. In the main Figma design file there are no indications of font problems.

Message: Missing fonts in interactive components. This file contains interactive components with missing or local fonts (Arial Bold). These fonts will be automatically replaced inside interactive components…

Hey Amanda, we just pushed a fix for a bug we noticed to day with our local font agent. You might need to restart your computer but this should hopefully be fixed now.

Not 100% sure if it’s related to what you’re reporting but would be great to check and see. Thanks! :slight_smile:

Thanks for the quick reply! Unfortunately after restarting my computer, checking for Figma updates, and reloading Figma tabs, I’m still seeing the yellow font error on my prototype preview. I checked and other Figma files using these same button components also show the error on the prototype.

One thing might have been fixed however. Yesterday in the prototype preview the buttons were actually displaying with the wrong style (why I had to detach them). Today, when I place a new button component in my file, the text is displaying correctly (bold) in preview even though I still have the yellow font warning. So maybe the font display issue itself has been resolved and we just need something else to clear that yellow warning? Unsure exactly. But thanks for looking into this.

Remarkable issue, definitely needs fix!
One unsustainable workaround what I’m using now is to unlink text from style in interactive elements.

Experiencing the same thing. All 3 designers who are on our project have the exact same copy of Archivo (a Google font) installed. We see no issues when in design mode, but in prototype preview we get the little yellow “A?” in the top bar. When you click on it this modal appears:

Any idea why we would be seeing this message only in prototype preview mode?

Hey all so this may actually be expected behavior. See this post here: New missing fonts behavior in interactive components