So, you finally found the perfect font for your design, but it’s not available in Figma. Considering Figma offers hundreds of amazing fonts, you might be able to find an alternative close to you. But why compromise when you can also add your custom font and create exactly the design you envisioned?
Below we explain how you can add fonts to Figma to make your designs more varied. Also stick around for answers to some common questions.
Add sources
If you cannot find the font you need in Figma’s extensive repertoire, you will need to download and install it on your device. If you use Figma windows either macOS desktop app, the fonts installed on your device will automatically appear in your font picker. Users of the browser app will need to take an extra step before they can enjoy any font in their Figma interface. Unfortunately, ChromeOS and Linux users will not be able to add their custom fonts to Figma. If you are a Windows or Mac user, read on.
Add Fonts to Figma on Windows
To use your new font in Figma, you will need to download and install it on your device.
- Download the font you want to import into Figma.
- Go to your Downloads folder and extract the zip file.
- Open the folder for the Windows operating system.
- Double-click the font file.
- Click “Install” in the pop-up window.
The font is now available on your device and therefore also on Figma. Restart the app to see the changes.
You can find installed fonts in Windows by opening Control Panel and then Appearance and Personalization. Double click on “Fonts” and you will see your library.
Add Fonts to Figma on Mac
To install a new font on Mac, follow these steps:
- Download the font of your choice.
- Find the downloaded file in Finder.
- Extract the compressed file if necessary.
- Open the folder with the files for macOS.
- Double-click the font file.
- Click the “Install Font” button on the pop-up window.
After you install the font on your device, it will automatically appear in the font picker of your Figma app. If you can’t see it, restart the app and it will appear.
The installed fonts will be in the Font Book app on your Mac. You can disable or remove any font here by selecting it, then clicking “Edit” and clicking the appropriate option in the menu bar.
Add Fonts to the Figma Browser App
Your local fonts won’t appear by default in the browser app, but you can remedy this with a handy background service. You will need to install the Figma font service, available on their website.
Add your local fonts to the Figma browser app like this:
- Download the font service for your Windows or macOS device.
- Install the app.
- Update Figma in your browser.
- Your local fonts will now be in the font selector.
Additional FAQs
Can I use Google Web Fonts in Figma?
Yes, Figma uses Google’s huge library Web fonts default. You won’t need to install Google Fonts to use them in the app. Some Google Web Fonts will be in your font picker by default.
What are the best Figma fonts for UI design?
With countless sources to sift through, finding the right one becomes a challenge. To save some time, start your search with the best Figma fonts for UI design. Luckily, these are also Google Fonts, so they’re available to everyone. Figma also provides some tips on pairing the most popular Google fonts to make work easier for its users.
The best sans-serif fonts include:
· Open without
· Lato
· Montserrat
·Raleway
· robot
For the best serif fonts in Figma, check out:
· Playfair exhibition
· Lora
· Merriweather
· Crimson text
Use any font in Figma
The right font can make a significant difference to any design, improving everything from readability to the entire atmosphere of the web page. Figma knows this well and allows you to import any font you want. Download and install the font on your device and it will be available in the app instantly. The font service will help you if you use the browser version.
