For the complete documentation index, see llms.txt. This page is also available as Markdown.
▶️How to use custom fonts
Add custom fonts to your Webstudio site.
Webstudio lets you use custom fonts without relying on third-party services like Google Fonts. You can either choose from built-in font stacks or upload your own font files.
Modern Font Stacks - Zero Millisecond Font Loading
Can I use custom font files?
Yes — you can upload your own fonts directly inside the Webstudio interface, no external hosting required.
How to add custom fonts
Select any text element on your canvas.
In the Typography section of the Style Panel, click the cloud upload icon next to the font family dropdown.
The Fonts menu will open. From here you can:
Choose from Modern Font Stacks
Pick a system font
Click Upload to add your own font files (e.g. .woff, .woff2, .ttf)
What are "Modern Font Stacks"?
Webstudio includes built-in support for Modern Font Stacks, which are fast, system-based font combinations designed to look good across platforms. They’re a great alternative to web-hosted fonts and help improve page load speed and privacy.
Why Use Modern Font Stacks?
When you add custom fonts to your website, visitors must download those font files. Each font variation (bold, italic, bold 900, etc.) is a separate file that adds to load time. This can cause:
Slower page loads
Flash of Unstyled Text (FOUT)
Flash of Invisible Text (FOIT)
Modern Font Stacks solve this by using fonts that are pre-installed on different operating systems. The browser automatically selects a font that's already on the user's device.
Benefits
Zero millisecond load time — fonts are already on the device
No flashes — instant rendering
Better performance scores — no external font requests
Privacy — no third-party font services tracking users
How They Work
Each font stack contains fonts for:
macOS/iOS (San Francisco, New York, etc.)
Windows (Segoe UI, Cambria, etc.)
Linux (various system fonts)
Android (Roboto, etc.)
The browser reads the list and uses the first font it finds installed. Webstudio automatically outputs all the font variations for cross-platform compatibility.
When uploading custom fonts, these formats are supported:
.woff2 (recommended - best compression)
.woff
.ttf
.otf
Best Practices
Use WOFF2 format when possible for smallest file size
Limit font variations — only upload weights you actually use
Upload upright and italic files together when a family provides separate files. Webstudio reads each file's style metadata so the browser can select the correct face.
Consider variable fonts — one file can contain multiple weights and may also contain italic or slant variations
upload-font
Related
Design tokens – Create reusable styles including typography tokens
Project settings – Configure project-wide settings and custom code
