Missing fonts in prototype - Interactive components

It’s happening to some of my interactive components utilising Font Awesome types. The font isn’t actually missing. I suspect the bug has to do with its ligatures – when the bug occurs, the text messes up in the same way when i turn off ligatures under type details > letterforms.

Still the same issue in July

I am using Font Awesome for icons. When I share a prototype that contains interactions on the icons, the icons change to their code-text on hover.

Fx: if I hover the “house” icon, the icon changes to the word “house”.

Still having this issue - we had to stop using the interactive components all together.
Super annoying that this has not been fixed :slight_smile:

3 Likes

This was created back in May. Can we please can an update on this? I’ve basically had to resort back to static prototypes - with no hover interactions. It’s essentially Sketch.

I just want an update or an acknowledgment that this issue is known. I think it’s a pretty big bug and many users are annoyed with it.

7 Likes

I’m also having this problem! Can we get an update?

1 Like

It seems to be especially buggy with interactive components with variants

1 Like

Same problem here. Especially visible with fontawesome with ligatures

  • Not having a problem if the font is installed locally and the server is running
  • If I don’t have the font, it render the raw text instead of the icon.

→ My hypothesis is that the content of the variants are regenerated when appearing, instead of just being displayed, hence breaking any prerendered texts.

Very frustrating :frowning: We have to revert back to use SVG icons as a mitigation …

1 Like

This is quite a big issue. The fonts appear fine when my team is working on the document, but when shared with the client via the share link, the fonts appear broken and ultimately break the interactive prototype.

2 Likes

I’m experiencing the same issue. While designing, everything works fine, but in presentation mode, the fonts (one of them being Font Awesome 6 Pro) don’t load.

But I discovered something curious:
I only experience the issue when I go into presentation mode with no artboard/frame selected.

If I select an artboard/frame before clicking the play icon, the fonts will load just fine, and everything works as expected.

4 Likes

Same issue but not in Figma, but in MAZE.
We have this issue with a font which is included in our shared font. The issue is with the interactive components.
When we load the prototype in Maze, the interactive components don’t load the font “Some missing fonts were replaced”.

1 Like

Everything works perfectly within the Figma app for me.

Presented over Zoom within the Figma app to a client last week, everything worked brilliantly. Then I went to send the link so they could play around with it in their browser and thought I’d test the link before sending… and boom, all my variants had missing fonts – on my machine with all the relevant fonts installed.

I would kinda understand if the issue was only when viewed on a machine without the fonts installed, but mine has them installed.

It’s a pointless feature if we can’t send a prototype link to a client and everything render as it should.

1 Like

I also have this issue, but I found a way to overcome this and use Font Awesome Pro
Icons in Figma Prototypes.

It is to “outline stroke” (ctrl-shift-o on PC).

Yes, you lose the editability of this icon, but if you keep a template component that is not outlined, it’s easy to create new ones or update existing ones.

If you get the plugin Select Layers, you can easily select the text layers inside a batch of components/variants and turn them to outline all at once. Then, no more issues with rendering in prototype and more importantly sharing to clients.

That’s what I did, hope that can help people.

Still, it’s a bug and should be adressed by Figma dev team.

1 Like

When you present a prototype, there is a bug with the fonts. The fonts are replaced by a generic font, even if it’s in your design system.

I have found two ways to change that :
Use a Google font or add manually fonts as admin in Figma directly in the settings.

Hope this helps you :v:

2 Likes

+1 same problem

in presentation mode fonts change to another while hovering element
(bugs have coming yesterday)

I get this only with component instance, if I detach instance them, the font then renders properly, but that defeats the purpose of components in the first place.

If I select the first flow artboard, THEN click on play to get the prototype. My prototype now display the font properly. If I share from this link, people see it properly.

Like someone else mentionned, having no frame selected when pressing play generates the issue.

1 Like

This is a big issue for me with interactive components. Can’t use them in prototypes if the correct fonts don’t display. It seems like it’s been happening for months with no response? Hopefully will be fixed when it the feature comes out of Beta.

For me, I have Open Sans set as the font, the google fonts version, but when my prototype renders in preview mode, the fonts in just the interactive component reset to browser defaults and do not display as Open Sans.

1 Like

Sample problem here, and same workaround working for me as well. It doesn’t matter which frame is selected before going into presentation mode.
Thanks for sharing Jonas!

My typeface is switched to Helvetica for the text elements in interactive components. If I disable IC before going into presentation mode, the correct typeface is showed. Note: this is a regression as of a week ago for me.

Appears to be a duplicate of Missing fonts in prototype - Interactive components

Same problem here.

This appear more frequently on browser and in console I get error 400 and 401.

The font I used is Jost family, but the above errors are also for Roboto and IBM Plex.

1 Like