Yes, Figma uses Google’s huge library of Web Fonts by default.

Your local fonts will now be in the font picker.Īdditional FAQs Can I use Google Web Fonts in Figma?.

Download the font service for your Windows or macOS device.You’ll need to install Figma’s font service, available on their website.Īdd your local fonts to the Figma browser app this way: Your local fonts won’t appear by default in the browser app, but you can remedy this with a handy background service. You can disable or remove any font here by selecting it, then clicking “Edit” and the appropriate option in the menu bar. Your installed fonts will be in your Font Book app on your Mac. If you can’t see it, restart the app, and it will show up. Click the “Install Font” button in the popup.Īfter installing the font on your device, it will automatically appear in the font picker in your Figma app.Open the folder with the files for macOS.Extract the compressed file if necessary.Look for the downloaded file in Finder.

To install a new font on Mac, follow these steps: Double-click “Fonts” and you’ll see your library. You can find your installed fonts on Windows by opening your Control Panel, then Appearance and Personalization. Restart the application to see the changes. The font is now available on your device, hence in Figma as well. Go to your Downloads folder and extract the compressed file.Download the font you want to import to Figma.To use your new font in Figma, you’ll need to download it and install it on your device. If you’re a Windows or Mac user, read on. Unfortunately, ChromeOS and Linux users won’t be able to add their custom fonts to Figma. Browser app users will need to take an extra step before they can enjoy any font on their Figma interface. If you use the Figma Windows or macOS desktop app, the fonts installed on your device will automatically appear in your font picker. If you can’t find the font you need in Figma’s expansive repertoire, you’ll need to download it and install it on your device. Stick around for the answers to some common questions as well. Here’s how you can add fonts to Figma to make your designs more varied. But why make compromises when you can also add your custom font and create precisely the design you dreamed up? Considering that Figma offers hundreds of amazing fonts, you may be able to find a close alternative. Now that you have the font installed in your device, simply open Figma and select any text.So, you finally found the perfect font for your design, but it’s not available in Figma. Here are instructions for Mac and Windows. Like all downloaded fonts, you’ll then need to install/add it to your device. Click ‘Download font’ and a font file will immediately start downloading. You’ll see a missing fonts alert with the option to download it directly from the plugin. Download missing fonts directly from the plugin 📥Īfter importing the webpage, html.to.design will automatically detect that you don’t have this font installed in Figma.

Paste it into html.to.design and click “Import” (or use our browser extension if it’s a private page behind a log-in). Import your website with html.to.design 🪄Ĭopy the URL your webpage with the font you need. Use html.to.design as a shortcut to get your website’s font directly into Figma. How to get your website’s font into Figma in 3 steps Whatever your use case, having the right fonts installed in Figma is key for all design projects. Or, you might be compiling a benchmark of different competitor websites, or a moodboard for inspiration, and don’t have these brand fonts pre-installed in Figma. You may also be redesigning an old website and no longer have the font used for that website installed in Figma. If the font was designed especially for your company or brand, you’ll have to download it to add it to Figma’s font library. While Figma boasts an impressive list of Google web fonts already pre-installed and ready-to-use, for most designers, these aren’t always enough…įor example, you might need a new or different font than what’s available in Figma because your website uses a very specific brand font. And with html.to.design, you now have a quick and easy way to access your website’s font, making it simpler than ever to get the font you need into Figma. With so much riding on the right choice of font, it’s no wonder that designers often need to look beyond Figma’s pre-installed fonts to find the right one. They also help establish brand identity and create visual hierarchy within a design. Fonts can convey a range of emotions and moods, from playful and lighthearted to serious and professional. How to get your website’s font into Figmaįonts are a crucial aspect of design, and choosing the right one can make or break a project.

Figma use local fonts