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.

 


Reply