Whether you’re designing a new interface or crafting a stunning presentation, having the right font can make all the difference. If you’re working in Figma on the web version, you might find yourself wanting to add a new font to your design. Luckily, the process is simple and easy to follow.
Step 1: Install Font Installers for Web Version Users
If you’re using the web version of Figma, adding custom fonts requires a little extra step. First, you’ll need to download the Font Installers. This ensures that your computer can communicate with Figma and bring in those new fonts you want to use. Don’t worry if you’re using the desktop version – it already comes with the necessary tools built-in.
Click here to download Font Installers.
Step 2: Choose Your Desired Font
Next, head over to a font website and pick out the font you want to use. Google Fonts is an excellent option, and for this guide, we’ll use it as an example. Figma only supports fonts in .TTF (TrueType Font) and .OTF (OpenType Font) formats, so make sure you choose a font in one of these file types.
Click here to visit Google Fonts.
Step 3: Download the Font
Once you've found the perfect font, click the Download button. The font will be downloaded to your computer, typically as a zipped file containing several font files.
Step 4: Install the Font on Your Computer
Open the downloaded font file. Inside, you’ll usually find multiple font files. Look for the one that ends with .TTF or .OTF – these are the ones that you’ll need to install. Once you’ve selected the file, click on it to open and install it. After the installation, your font will be ready for use!
Step 5: Refresh Figma
Now that you’ve installed your new font, head back to Figma and refresh the page. This step ensures that Figma picks up the new font you just installed.
Step 6: Find Your Installed Font in Figma
On the left sidebar of Figma, look for the Typography section. When you click to change the font, you should now see an option labeled Installed by you. This is where all the fonts you’ve added will appear. Simply select it from the list!
Step 7: Apply the Font to Your Design
Finally, click on the font you’ve added, and watch it instantly transform your text! Whether it’s a headline or body text, you can now apply your custom font throughout your design.