How to Use Google Fonts in Figma
A complete guide for UI/UX designers — installation, best practices, shortcuts, and troubleshooting.
Try Before You Install — Preview Any Google Font
Not sure which font to use? Preview it with your own text before downloading.
Use this previewer to test fonts before installing them on your system.
1. Why Figma + Google Fonts Is a Designer's Dream
Google Fonts offers over 1,500 free, open-source fonts that are professionally designed and ready for commercial use. Figma is the industry-standard design tool for UI/UX. Together, they give you unlimited typographic possibilities without spending a dime.
But here's the catch — Figma doesn't have Google Fonts built-in. You need to install them on your computer first. Once installed, they work just like any other system font. This guide walks you through exactly how to do that, plus tips I've learned from years of designing in Figma.
2. How to Install Google Fonts in Figma — Step by Step
Find Your Font on Google Fonts
Go to fonts.google.com and browse or search for the font you want. Click on it to see details.
Download the Font Family
Click the "Download family" button in the top right. This downloads a ZIP file containing all font weights and styles.
Extract the ZIP File
Double-click the downloaded ZIP file to extract it. You'll see individual font files (.ttf or .otf).
Install on macOS
Double-click each font file, then click "Install Font" in Font Book. Or drag all font files into Font Book app.
Install on Windows
Right-click each font file and select "Install". Or drag them into the Windows Fonts folder in Control Panel.
Restart Figma
Close Figma completely and reopen it. Your new font will now appear in the font picker!
3. Troubleshooting: Fonts Not Showing Up in Figma?
❌ Font installed but not in Figma's font picker
Solution: Restart Figma completely. If still missing, check if the font is installed correctly in your system's font manager. On macOS, open Font Book and verify the font appears and is activated (no "Off" icon).
❌ Font shows up but text looks different
Solution: You might have installed only one weight. Google Fonts families often have multiple weights (Regular, Bold, etc.). Download the entire family and install all weights.
❌ Figma says "Font missing" on shared projects
Solution: Team members must install the same fonts on their computers. Figma doesn't sync fonts automatically — everyone needs local installation.
❌ Font looks blurry or pixelated
Solution: You might be using a low-quality version. Download fonts directly from Google Fonts official website, not third-party sources. Also check your Figma view settings — ensure you're at 100% zoom.
4. Typography Tips for Figma Designers
Use Text Styles
Create reusable text styles in Figma for headings, body, captions. This ensures consistency across your design system.
Limit Font Families
Use 2-3 font families maximum per project. One for headings, one for body text, maybe one for accents.
Test on Mobile
Use Figma Mirror app to preview your designs on actual phones. Fonts look different at small sizes.
Check Contrast
Ensure your text meets WCAG contrast ratios. Use plugins like Stark or Contrast within Figma.
5. Best Google Fonts for Figma Projects
6. Google Fonts vs Local Fonts in Figma
✅ Google Fonts
- Free for commercial use
- Optimized for web and screen
- 1,500+ professionally designed options
- Open-source licensing
- Easy to download and install
✅ Local/System Fonts
- Already installed on your computer
- No download needed
- Familiar to users (Arial, Helvetica)
- Sometimes have licensing restrictions
- Limited variety compared to Google Fonts
My recommendation: Use Google Fonts for most projects. They're free, high-quality, and professionally designed. Keep system fonts as fallbacks in your design system.
7. Collaboration & Font Sharing with Teams
When working with a team, font consistency can be challenging. Here's what works:
- Create a font list — Document all Google Fonts used in your project in a shared Notion or Google Doc.
- Installation guide — Share this article with your team so everyone installs fonts correctly.
- Use Figma's "Share Fonts" feature — In the font picker, you can see which fonts team members have installed.
- Consider Font Helpers — Tools like FontBase help teams manage fonts across multiple computers.
8. Figma Typography Shortcuts You'll Use Every Day
Figma + Google Fonts Checklist
Frequently Asked Questions
Can I use any Google Font in Figma?
Yes, you can use any Google Font in Figma as long as you have the font installed on your computer. Figma uses your system fonts, so after installing a Google Font, it becomes available in the font picker instantly.
Why are my Google Fonts not showing in Figma?
If you've installed a Google Font but it's not showing in Figma, try restarting Figma completely. If that doesn't work, check if the font is properly installed in your system's font manager, then refresh the font list in Figma using the font picker search.
Do I need to install Google Fonts for every Figma project?
No. Once a Google Font is installed on your computer, it's available for all your Figma projects. However, if you're collaborating with team members, they'll need the same fonts installed on their systems to see your designs correctly.
What are the best Google Fonts for UI design in Figma?
Inter, Roboto, and Open Sans are excellent choices for UI design. For headings, Montserrat and Playfair Display work well. For code or data-heavy interfaces, use Roboto Mono or Space Mono. The best choice depends on your brand and readability needs.
Can I use Google Fonts in Figma for commercial projects?
Yes. All Google Fonts are released under open-source licenses (typically SIL OFL or Apache 2.0) which permit free commercial use. You can use them in client designs, exported assets, and final products without paying any licensing fees.
How do I share Figma designs with fonts that others don't have?
Figma will show a "Missing Fonts" warning. You can either ask your team members to install the same fonts, or use Figma's "Share Fonts" feature which allows you to share font files through the platform. Alternatively, convert important text layers to outlines before sharing.
Related Guides
Affiliate link — we may earn a small commission at no extra cost to you