Adding custom fonts in Figma helps you match brand guidelines and refine visual hierarchy. This quick workflow lets you bring in local or variable fonts so text looks exactly as intended.
Below is a practical overview of what to expect, how to prepare, and how to manage fonts smoothly inside Figma.
| Step | Action | Where | Notes |
|---|---|---|---|
| 1 | Download font files | Font foundry or marketplace | Check license and file format (OTF, TTF, WOFF2) |
| 2 | Install system font (optional) | OS font manager | Helps preview before uploading to Figma |
| 3 | Upload to Figma file | Figma Team or Company Library | Shareable across files and teammates |
| 4 | Apply to text | Text layer properties | Use style overrides for consistent updates |
Preparing Fonts for Upload
Before you add a font to Figma, make sure the files are ready and licensed for use in commercial projects.
Collect font files in OTF or TTF format, and confirm that web fonts in WOFF2 can be self-hosted if needed. Organize family members like Regular, Bold, and Italic into a clear folder so you can apply them quickly during design.
Check License Compatibility
Review desktop and web licenses to avoid conflicts. Desktop fonts installed locally can be uploaded to a team library, while commercial web fonts may require hosting on your CDN if Figma does not serve them directly.
Uploading Fonts to a Team Library
Using a Team or Company Library centralizes custom type so everyone can access approved styles without re-uploading.
Open the Team Library panel, click Manage Fonts, then Upload Fonts. Name the collection descriptively, such as Brand Display or Body Copy, and tag team members responsible for maintenance. Once published, the font appears in the text properties dropdown for all editors on that team.
Manage Versions and Permissions
Set edit rights for library managers and enable change logs so you can track who added or updated a typeface. For large organizations, create a naming convention that includes weight and style, making it easier to search and assign text styles.
Applying Uploaded Fonts in Files
After a font is available in a library or uploaded directly to a file, you can assign it to text layers quickly.
Select a text block, open the Text tab in the right panel, and choose the custom style from the list. Create text styles for each combination of family, weight, and size, then link them to components so global updates propagate across screens.
Maintain Consistency with Style Overrides
Use overrides sparingly and document when deviations are intentional. For multilingual projects, verify that the font supports all required character sets to prevent missing glyphs during stakeholder reviews.
Troubleshooting Common Issues
Missing fonts and rendering differences can disrupt handoffs and previews, so it is important to verify setup early.
If a file shows a warning, re-upload the font or check library permissions. When stroke weight or spacing looks different across devices, inspect line height and tracking settings, and test exports to confirm that PDF and SVG outputs preserve the intended appearance.
Optimizing Team Font Workflows
Establishing a repeatable process reduces confusion and keeps typography consistent across projects and collaborators.
- Verify licenses before uploading desktop or web fonts to team libraries
- Use a consistent naming system for collections and text styles
- Centralize approved fonts in a Team Library for single-source access
- Create text styles for every recurring combination of family, weight, and size
- Test multilingual characters and export formats during implementation
FAQ
Reader questions
Can I use variable fonts and adjust axes in Figma?
Yes, Figma supports variable fonts uploaded from compatible files. After uploading, you can apply stylistic sets and adjust variable axes using the design panel controls where available.
Will my installed font appear for editors who do not have it locally?
It will appear if the font is part of a Team or Company Library and the editor has file access. Otherwise, Figma falls back to a similar system font unless the file owner explicitly shares the custom type through library permissions.
How do I update a font without breaking existing text styles?
Replace the font file in the Team Library and confirm the linked text styles point to the updated collection. Notify teammates to reload assets so changes propagate without manual reassignment in each file.
Can I use different weights from the same family for consistent branding?
Yes, upload all required weights and create separate text styles for each weight and size combination. Group them under a clear family name to streamline updates and keep branding cohesive across designs.