Working with Fonts
Figma automatically gives you access to an extensive catalog of Google Web Fonts.
You can also access to a number of other custom or locally stored fonts, allowing you to choose the perfect font for your project.
In this article, we'll cover:
- Applying Fonts
- Using Local Fonts
- Using Icon Fonts
- Using OpenType Features
- Managing Missing Fonts
- Writing in Other Languages
For more information on what fonts are included in Google Web Fonts, check out their website: https://fonts.google.com/
Fonts can be applied to an entire text object, a number of selected text objects, or a selection of letters or words within a text object.
- Select the text object(s). Learn more about Selecting Layers and Objects.
- In the Properties Panel, you will find the Text section. This allows you to make changes to a number of text related properties:
- The current font will be displayed in the first field at the top of the Text section. In our screenshot above, this is Roboto.
- Click the down arrow to the right of the font to open the Font Picker:
- Scroll through the list of available fonts to find and select your desired font:
- Once you've chosen your font, any selected text objects will be updated.
Using Local Fonts
If you would like to use additional fonts in your Figma designs, that aren't included in the list of Google Web Fonts, then you can use fonts that are stored locally on your computer.
Tip! Adobe Typekit fonts are supported on devices running macOS or Windows 10. If you're not seeing these on your Windows laptop, ensure you are running the latest version of Windows.
If you're using the Figma Desktop app, then any locally stored fonts will already be available to you. These can be found alongside the Google Web Fonts in the Font Picker.
If you're using Figma in the browser, then you will need to install the Figma Font Helper application. This allows you to access any locally stored fonts in the browser.
Install the Figma Font Helper
- Click on your name in the top-left corner.
- Select Account Settings from the options.
- Scroll down to the Fonts section.
- Click the Download Installer to enable local fonts button:
- Or, download the Font Helper from the Figma website directly: https://www.figma.com/downloads/
- Run the installer and follow the on-screen instructions.
Tip! To uninstall the Figma Font Helper you can return to this same screen and click the Download Uninstaller to Disable Local Fonts link: Run the uninstaller and complete the on-screen instructions.
Note: Using Local Fonts is not currently supported on Linux (e.g. Ubuntu) or ChromeOS (e.g. Chromebook).
If you are part of a larger company or organization, then we recommend checking out Figma Organization.
Professional accounts rely on every individual user having a font locally installed on their machine. However, Figma Organization allows users in an Organization to access and use shared fonts within a specific team, or across the entire Organization.
Using Icon Fonts
By default, Figma already supports Font Awesome, a popular and easy-to-use set of icons. If you'd like to use other icon based fonts with Figma, then you can do this using Local Fonts.
This will require you to have a copy of this font installed locally on your device. Once installed, any icon fonts will be available in the Font Picker alongside your other fonts.
Using Font Awesome in Figma
- Create a text object in the Editor.
- In the Text section in the Properties Panel, click the down arrow next to the current font.
- Select the Font Awesome 5 Free font from the list:
- Copy the icon your want to use from the Font Awesome cheatsheet: https://fontawesome.com/cheatsheet
- Paste the icon into your text object in Figma:
- Font Awesome has both Regular or Solid versions of an icon. Depending on the icon you wish to use, you may need to switch between these using the Font Style field:
Note: Font Awesome has icons in both Regular or Solid style. If an icon isn't showing up when pasted, you may need to switch the Font Style to Solid before the icon is displayed.
Using OpenType Features
OpenType is a cross-platform format for scalable fonts. It was developed in collaboration between Microsoft and Adobe.
The following OpenType features are enabled in Figma, by default:
- Kerning (kern)
- Ligatures (liga, clig, rlig)
- Contextual Alternates (calt, rclt)
- ccmp, curs, locl, mark, mkmk
You can also enable the following additional font features, in the Advanced Type panel:
- Discretionary and Historical Ligatures (dlig, hlig)
- Stacked Fracations (frac)
- All Small Caps (smcp, c2sc)
- Subscript (subs)
- Superscript (sups)
With the Advanced Type panel, you can also control the numeric spacing and figure:
- Proportional Lining (pnum, lnum)
- Tabular Lining (tnum, lnum)
- Proportional Oldstyle (pnum, onum)
- Tabular Oldstyle (tnum, onum)
Note: If a specific font does not support a particular OpenType feature, then adjusting these settings will have no effect.
Managing Missing Fonts
If a File uses a font that is not available to you through the Font Picker (via Google Web Fonts or any locally sourced fonts), then you will receive a Missing Font alert:
This appears when you attempt to edit any text that uses that font, not when you first load the File.
There can be a number of reasons why this occurs. The following are the most common explanations:
- Other collaborators have been using Local Fonts that aren't available on your machine.
- A collaborator is using a different version of the same Font, either an older or a newer version, which is not accessible to you.
To continue editing any text objects within the File, you will need to do one of the following:
- Install or update any missing fonts on your computer (that you are licensed to use).
- Select another font to use in place of the missing font. The missing font modal allows you to quickly update all affected text objects at once (see below)
Note: Option 2 will update the File for all collaborators, including those with access to the original font, so proceed with caution!
Replace a Missing Font
If you would like to update all affected text objects, so that they use an available font, you can do this via the Missing Font modal.
The Missing Font modal will list every font style in the File that is missing or unavailable. You will be able to see both the font Family and the Style.
- Use the drop down next to the font Family to select a new Family. You'll only be shown a list of fonts that are available to you:
- Figma will attempt to match the Style to the missing font, but you can use the dropdown next to the Style to change it to another Style.
- Complete the process for any remaining missing fonts.
- Click Apply when ready to complete the process:
- All text objects in the File will be updated to the new fonts.
Writing in Other Languages
In our Writing in Other Languages article, we show you a couple of ways you can work with Figma in other languages:
- Understanding Font Fallback
- Using Google Noto Fonts
- Using Local Fonts
- Using Right-To-Left (RTL) Languages