Working with text in Figma often starts with a simple question: how to change font to match the exact vision you have for a design. While the interface is intuitive, mastering the nuances of typography ensures your text communicates with precision and style. This guide walks through the entire process, from basic edits to advanced styling techniques.
Accessing the Text Tool
The first step to modify type is selecting the element you want to adjust. You can change font settings for both existing text layers and new additions. The process is consistent whether you are working on a heading, body copy, or placeholder text.
To begin, locate the canvas where your text resides. Click directly on the text box to highlight it. If you need to create a new text element, you can select the Text tool from the left-hand toolbar or press the T key on your keyboard. This action places an editable cursor on the canvas, ready for input or modification.
Using the Right Sidebar
Font Selection and Size
The most direct method to change font properties is the right-hand sidebar. When a text layer is selected, the sidebar populates with specific text properties. The top section of this panel displays the current font family, weight, and size fields. To change the font family, click the dropdown menu labeled "Font." This reveals a list of fonts available in your current Figma file. This list includes Local Fonts installed on your machine and any Google Fonts synchronized with your Figma account. Selecting a new font applies the change instantly to the selected text.
Adjusting Weight and Italicization
Not all fonts offer the same visual variations. Figma handles this through weight and style adjustments. If you choose a font family with multiple variants, such as Regular, Medium, or Bold, the "Weight" dropdown allows you to switch between them. Similarly, the italic icon allows you to apply an oblique style. Note that if the specific weight or italic version is not available in the font file, Figma will attempt to simulate the style, which can sometimes lead to slightly different results than the true font file.
Advanced Properties and Effects
Beyond the basics, Figma provides controls for line height and letter spacing. These features are crucial for readability and aesthetic balance. In the text section of the right sidebar, you will find inputs for "Line height" and "Letter spacing." Line height controls the vertical distance between lines of text, while letter spacing adjusts the horizontal distance between characters. Entering numerical values manually gives you precise control over these metrics, allowing you to fine-tune the text block to perfection.
Applying Global Styles
For design systems and team collaboration, relying on local overrides is not sustainable. Figma addresses this with Text Styles, which allow you to save specific combinations of font properties as reusable assets. To create a style, select your formatted text and click the "+" icon next to Text Styles in the assets panel or the right sidebar. Once saved, you can apply this style to any other text layer instantly. This ensures consistency across your project and makes global updates effortless whenever the brand guidelines change.
Working with Fonts and Variables
In more complex projects, you might utilize Design Variables to manage color and text properties. While you cannot change font variables directly in the same way as color, you can manage the source of truth for your typography. To change the actual font linked to a variable, you must edit the variable definition in the Variables page. However, you can still override the font on a per-instance basis by selecting a text layer and choosing a different font family, effectively creating an exception to the global rule.
