The following contains the original contents of this post which is now outdated:
Original announcement
Hi all! You may have noticed changes recently where fonts were replaced on load in prototypes with interactive components, even when the prototype was viewed on a device with access to those fonts. This was a bug and has been fixed.
We are launching new font handling behavior for interactive components in prototypes viewed on devices without access to fonts.
This fixes various layout and override preservation bugs that would occur when prototypes using local-only fonts inside interactive components were viewed on devices without those fonts installed.
We’re now replacing any missing fonts inside interactive instances with Inter when loading a prototype with interactive components enabled. We’ll show a notification when this happens and an A? icon in the presentation mode toolbar that may be clicked to display more information. Here is what that looks like:
If you have all needed fonts installed on your device, we won’t replace any fonts, but we’ll still show the A? icon if you have any local-only fonts that might be replaced when the prototype is viewed on other devices.
If your team is in an organization plan, you can ensure that all prototype viewers have access to fonts in your prototype by uploading them as shared fonts. Issues involving access to shared fonts in embeds and maze integrations should now be fixed.
We recommend using Google fonts for prototypes that are being shared with viewers who may not have access to custom fonts in your designs, or flattening text if possible.
I notice this behavior also applies to the Beta mobile application. Even if the font is shown everywhere in my design, in some interactive components is replaces with something else (Inter maybe?)
To give some context, I’m working on a mobile application, I’m using SF Pro Text and I’m working on a mobile app design using the Beta app on an iPhone 12.
I suppose I’m mostly left wondering if there are any future plans to fully support non-local fonts for interactive components in prototype mode, or if there is a technical constraint here that can’t be got around?
In my role, I’m creating web designs for our clients, most of which have their own specific brand font which needs to be used in the visuals in order to accurately show how the website will look when fully built. Most of these fonts come from our Adobe or Fonts.com subscription, so we can’t send them a local font file to install for when they look through the Figma link.
Currently, I’m leaning towards thinking it will be easiest to avoid interactive components completely to get around this, but this would be such a shame as they are so powerful and have been a game-changer up until now in terms of making my designs feel more like a website (mostly using them for hover states).
This issue is indeed a game-changer, I can’t use interactive components now because all my projects are meant to be viewed by external parties
I hope this is only temporary and that a fix is coming soon
Dunno if it’s interesting, but this is the error log my client gets when trying to view my prototype with interactive components
So basically the answer is avoiding local fonts on interactive components and stick only to Google Fonts? That’s quite a constrain if you are working for brands using specific non-google fonts.
How come replacing fonts to Inter is a solution? Is Figma reaching the point of releasing half-baked features and eventually becoming Sketch?
Hi there,
What’s interesting is that I am using a Google Font (Montserrat) but it still does text style switching when moving off of a hovered interactive component. I have Montserrat installed locally for all of the weights. What’s happening?
Edit: also, if I refresh the protoype, some instances of the same component will behave and others won’t, and the next time I refresh, it randomizes which instances will break and change every text style. I went back to the master component and detached one text style and it stopped changing altogether, but this is obviously problematic at scale.
To be honest, this approach is pretty bad;
it can be understood as: if I don’t use Google fonts, then I can’t see the most realistic font situation when previewing the prototype on my local computer.
This approach is both for designers. It’s a very bad experience, not to mention the people viewing the prototype
Hello,
This is a big update but it seems to not solve the problem a lot of us got.
Attached to this message you’ll find a prototype that i will explain next: Bug Demo
Background:
Button + Icon (And button with text only): Is a component with variants for Hover state
Font used is “Montserrat”. Available on GF and installed in my computer
What you can see:
If you happen to have Montserrat installed on your computer, the top menu bar will be glitchy on hover, while the bottom menu bar will work perfectly well.
If you don’t have Montserrat installed, both menus will work as expected.
So here we have to put our attention on two important things:
For whatever reason, when i install a font that is also available on google fonts, the menu goes glitchy. If you remove the font, everything goes back to normal.
As per why the bottom menu always worked, the answer is that i only took the main component with its variants, duplicated and renamed to “[Component] v02”. And it seems to refresh something under the hood, and the component and its variants then work as expected.
i wanted to share this comment to give you guys a hint that maybe this whole topic about missing fonts is not over yet. And to give the users a maybe usable workaround for this:
If you happen to find a glitchy hover interaction, make a duplicate copy of your document, so you can be able to safely mess with it, and then proceed to duplicate the main interactive components until you find the one causing the glitch.
In my case, what you see here is a little piece of a more complex menu. I proceed to start duplicating the core components of it, in this case the button, and everything worked at first try.
For the sake of testing, i also tried to go the other way and instead of duplicated from the small, i just duplicated the whole menu. Result is that the menu kept behaving glitchy.
So my advice is to try to pin point the faulty component duplicate it, rename it and reassign it.
Is there going to be any solid solution for this or is this how it will permanently behave, even after launch?
Currently, it’s either don’t use interactive components, which is a huge step for Figma prototyping or, pay us more money on an organization plan just for this one feature…
Adobe Fonts (my fonts are not stored locally and not available on Google Fonts)
team of 2 designers (the Organization plan is not necessary at all)
All font on the static design works well but when it’s used on Interactive Component, nope. There are a lot of 400 Error in the console and the Inter swap didn’t work well because I use specific font-weight (book / Medium) and I think it’s not supported by Inter. So part of my design prototype is broken, there is lack of consitency and visual hierarchy.
I don’t understand how a font can be called and used well in some part of the design but not in Interactive Component.
This is a really unfortunate regression. Is there a technical reason for this limit that would help us understand the issue? We use non-Google fonts in our prototypes without interactive components just fine. Or is this just an effort to drive more Org upsells?
Hi folks, we’re changing the way we handle missing fonts based on your feedback.
What’s the behavior now?
We’ve modified our text engine to be able to reuse cached information for interactive states whenever available, even for text with missing fonts. We’ll only fall back to Inter when we can’t both preserve text overrides and change font settings for an interaction.
For example, this means fonts will no longer be replaced in interactive components that only change properties like background color on hover, even if text within those components has content overrides and uses custom fonts not available on the viewer’s device.
Fonts may still be replaced during prototype playback if certain text settings (such as font weight) change between variants of components for text with content overrides. We’re working on resolving these issues. As a reminder, you can ensure prototype viewers always have access to the fonts needed by using Google fonts, shared fonts, or rasterizing text as necessary.
When is this happening?
The changes should be in effect now; make sure you’re using the latest version of Figma by refreshing any existing prototype tabs. If you’re still experiencing problems, please submit a bug report! You can help us get to a fix quicker by following these steps to file a report.
