Figma Sites was released in open beta at Config 2025. Learn more about what’s included in the beta.
Figma Sites lets you design and preview your site using custom fonts installed on your computer.
To publish your site with a custom font, you’ll need to upload the corresponding web font file—.woff or .woff2—so it displays correctly for visitors.
Tip: WOFF (Web Open Font Format) files are supported by all major browsers and are usually much smaller than TTF or OTF files. Using WOFF or WOFF2 helps your site load faster and perform better.
Before you begin
Confirm that your font appears under Installed by you in the font picker:
- In a Figma Sites file, create or select a text layer.
- Open the font selector in the Typography section of the right sidebar.
- Click the filter menu and choose Installed by you. Your custom font should appear in this list. If it isn’t included, you’ll need to add the font to Figma first.
You’ll also need the appropriate license to use the font on your published site.
Upload a font file to your site
If your designs use a font installed on your computer, Figma Sites will prompt you to upload the web font version before you can publish your site. This is because browsers can’t display non-standard fonts unless the font file is served with your site. Just like HTML and CSS, browsers need the relevant file to render your site correctly.
- In a Figma Sites file, make sure you have at least one text layer using your custom font.
- Click Settings.
- In the left sidebar, click Fonts.
- Click Upload to add the
.woffor.woff2file for each font used in the file.
Note: If you duplicate a site file that contains uploaded fonts, you’ll need to re-upload the font files in the new file.
Remove a custom font from your site
To delete a custom font from your site, follow these steps:
- Remove the uploaded font upload from Site settings
- Update all the text elements that use the font
- Republish your site
Note: If you delete the font file without updating the text layers that use the font, your published site’s CSS will still reference the missing font. The browser won’t be able to access the referenced font file and will fall back to its default sans-serif font.
1. Remove the font upload from your site file
- In a Figma Sites file, click Settings.
- In the left sidebar, click Fonts.
- Click Delete font next to the font you want to remove.
2. Update all the text elements that use the font
- In the same file, select a text layer that uses the custom font.
- Click the Actions menu in the toolbar and search for Select all with same font.
- With all matching text layers selected, choose another font in the Typography section of the right sidebar.
3. Republish your site
- Click Publish… in the left sidebar.
- Review the details in the Publish site window, then click Update.
Frequently asked questions
Why is the custom font showing on the canvas but not in the preview?
If you’re working with other people on the file, they may have installed a font on their computer and applied it to a text element in the file.
If you don’t have the font installed, the font will display correctly on the canvas, but not in the preview window. If this is the case, you should see a missing font alert at the bottom of the left navigation bar.
To resolve this issue, you’ll need to add the font to Figma.
If there isn’t a missing font alert, try refreshing the file.