Working with text in Figma often starts with the simple act of changing a font. While the interface makes text editing intuitive, mastering the full range of font options elevates your design workflow. This guide walks through the precise methods for updating type, ensuring your typography is both consistent and visually striking.
Accessing the Text Properties Panel
The foundation of changing fonts in Figma begins with locating the correct settings. Whenever a text layer is selected, the right-hand properties panel dynamically updates to display text-specific options. If the panel is hidden or you are working within a constrained plugin frame, you can manually open it.
Opening the Text Settings
Select the text object you wish to modify.
Look for the "Text" section within the properties panel on the right.
Click the small font name currently displayed to reveal the dropdown menu.
Using the Font Picker Dropdown
The most direct method involves using the font picker, which functions as a comprehensive library of available typefaces. Figma scans your system and any fonts added to your team library, presenting them in a clean, scrollable interface. This allows for rapid experimentation without navigating away from the canvas.
Steps to Change Font
With a text layer selected, click on the current font name in the properties panel.
A search bar and categorized list will appear.
Start typing the font name (e.g., "Inter" or "Montserrat") or browse by Style (Sans, Serif, Display) to find your desired option.
Click the font name to apply the change instantly.
Managing Font Variables
Modern variable fonts offer incredible flexibility, allowing you to adjust weight, width, and slant on a single axis. Figma provides native support for these intelligent fonts, letting you fine-tune typography without swapping between different font files. This is particularly useful for creating cohesive visual hierarchies.
Adjusting Variable Axes
Select the text layer containing a variable font.
In the Text Properties section, locate the sliders below the font name.
Drag the "Weight" slider to transition from Thin to Black.
Use the "Italic" slider to adjust the slant axis.
Applying Styles for Consistency
For design systems and team collaboration, relying on local font changes is inefficient. Creating text styles allows you to save specific combinations of font family, size, line height, and letter spacing. Updating the style later propagates the change globally, maintaining consistency across all your projects.
Creating and Editing Styles
Select your configured text layer.
Navigate to the "Text styles" tab in the assets panel (left sidebar) or the right properties panel.
Click the "+" icon or the "Create new style" button.
Name the style (e.g., "Heading 1") and confirm.
To change the font within the style, edit the text layer first, then create a new style update.
Troubleshooting Missing Fonts
Occasionally, you might search for a font only to find it unavailable. This usually indicates that the typeface has not been installed or added to your Figma account. Understanding how Figma handles fonts helps you resolve these gaps quickly.
Ensuring Font Availability
Check if the font is installed on your computer. Figma requires local installation to access the file.
If the font is missing, download the variable or static files from a provider like Google Fonts or Adobe Fonts.
