Figma Sites - Custom fonts change to other fonts in Preview
When I use Figma Sites, fonts in the build view looks fine.
But when I use Preview, some fonts default to arial. I’m using the latest version of Figma Desktop for Mac.
Authoring View - Montserrat Semi Bold
Preview - Changes to Arial Bold
The fonts are loaded on my system.
Page 1 / 1
Hi @David_Galliford
Thanks for reaching out. Are you using fonts from the "Installed by you" section? Just to clarify, custom fonts aren't currently supported in Figma Sites - only system fonts work properly. When you publish to Figma Sites, any custom fonts in your design will automatically default to system fonts. This could be a reason for this.
Thanks. I do use Google’s Montserrat, as it’s the native version of the font.
The font is installed using Extensis Connect font manager.
Kindest Regards,
David
Toku,
I had attempted to use the Google version many times over, with the same results. Even switching to Google’s Abel had no impact. I have a video, but it won’t let me upload it. I did find a solution that appears to have worked.
The following appeared to fix it:
Switch font to Arial
View prototype - shows in Arial
Switch font to Montserrat
View prototype (fixed)
Not sure if cache was an issue and going from Arial to another font forces it to empty the cache.
Thank you,
Dave
Hello, we have a corporate font that is synch across all files in figma by default. It’s not locally installed. And this font is used by the styles. On the Edit mode it looks fine but once I play the prototype all fonts are using the Arial font. Even when visiting the URL from the published Site it uses for all texts the Arial font. I tried changing one text field to any other font that is locally installed and it works perfectly. So the issue seems to be with the shared corporate fonts that are used in the cloud like the component libraries. hope it helps to fix the issue :-)
I have the same problem. My font is “Outfit” from google, but not working at all. It’s so frustranting, i can’t this like that. I’ll continue to use the old Figma design :(
PS: The worst thing is that Montserrat doesn't work, that should be a crime
I discovered the problem, you have to uninstall the old fonts (in your case monteserrat) and reinstall by downloading from google. When uninstalling, restart your machine, and then reinstall and see if it worked.
Same issue here. Google fonts do not render properly when previewing the designs. It does not work neither the weight
DesignPreview
I have the same problem. My font is “Outfit” from google, but not working at all. It’s so frustranting, i can’t this like that. I’ll continue to use the old Figma design :(
PS: The worst thing is that Montserrat doesn't work, that should be a crime
This worked for me, as well. I went into my Font Book and selected the Google fonts I have installed locally on my machine and deactivated them. I restarted Figma and it seemed to fix the issue.
When will custom fonts be available for use?
Any idea when custom fonts will arrive for Figma Sites? Currently unable to use it for this reason.
Hey All, thanks for your interest in custom fonts!
Our Sites team has confirmed that support for custom fonts is in the works, but we don’t have an exact timeline to share yet. We appreciate your patience and understanding while Sites is still in beta.
Not quite the use case listed above but maybe this will help someone… I was able to get custom fonts to work on a Figma site by:
Taking the provided CSS from an online font service like MyFonts or Typekit - including the import url of the font file
Replacing the font-family names used in that CSS - e.g. `custom-font` - and replacing it with the font-family name that Figma had generated `Custom Fond:Bold`
Pasting that updated CSS into the Custom Code section of my Figma sites
And then my custom font was visible on the published version of the Figma site
What’s going wrong
Font weight and appearance are not preserved
In Figma: font-weight: 275, looks bold enough.
On publish: rendered as Barlow Condensed: ExtraLight, visibly thinner.
Same happens with other fonts — rendering does not match the intended weight or style.
Container width is incorrect
In Figma: text element is set to a fixed width (96px).
On the live site: the same element appears narrower (72px).
This breaks the layout and spacing with adjacent elements (like letter .
Important: This behavior occurs regardless of which font is used.
It seems that Figma Sites ignores either:
the defined container width, or
the actual font bounding box / glyph metrics from Figma
The result is incorrect rendering that collapses layout elements, misaligns compositions, and makes the design appear broken — especially in typographic systems with precise alignment.
Not quite the use case listed above but maybe this will help someone… I was able to get custom fonts to work on a Figma site by:
Taking the provided CSS from an online font service like MyFonts or Typekit - including the import url of the font file
Replacing the font-family names used in that CSS - e.g. `custom-font` - and replacing it with the font-family name that Figma had generated `Custom Fond:Bold`
Pasting that updated CSS into the Custom Code section of my Figma sites
And then my custom font was visible on the published version of the Figma site