Skip to main content

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.

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.

You can find more details about this limitation in our documentation:https://help.figma.com/hc/en-us/articles/31242787286935-Use-design-tools-in-Figma-Sites#h_01JTGSP7B5NTFC2GE3FK907V37 

If you switch to using Montserrat directly from Google Fonts (rather than a locally installed version), the fonts should load correctly on your site.

I hope it helps but if the issue persists, could you submit a bug report detailing the steps that led to this issue? You can do so by following the link: https://help.figma.com/hc/en-us/articles/360041468234-Submit-a-bug-report?

 

Thanks!
Toku


Toku,

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:

  1. Switch font to Arial
  2. View prototype - shows in Arial
  3. Switch font to Montserrat
  4. 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

Design
Preview

 


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

 

  1. 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.

  2. 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.

  3. 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

this is what I thought to do. let me try this


Reply