When working with design teams, it can be frustrating when you encounter issues with font styles and sizes. One of these issues is adjusting font families for headings in Ant Design of React and the Ant Design System for Figma.

In Ant Design of React, line heights are based on decimal values (for example, 1.5), whereas in the Ant Design System for Figma, we use pixel values for text line heights (for example, 22px). This means that font sizes may appear different across platforms. However, with a few simple steps, you can adjust the font size and family for your Figma project.

To do this, first open your Figma file and navigate to the Typography/Font Size group. Here, you'll find a variable called fontSize, which controls the font size for all styles and components in your design. To update the font size, simply edit the value in the Default and Compact modes. For example, if you want to use a font size of 18px, enter '18' into the input field.

Next, navigate to the Typography/Font Family group, where you'll find variables controlling the font family for headings, code, and keyboard text elements. To adjust the font family for your headings, select all text styles that have 'Heading' in their name, then press Command (or Ctrl on Windows) to apply the changes.

If you want to use a different font family for your Figma project, you can search for and select a font family from the list of available options. For example, if you want to use Montserrat with a font weight of 800 exclusively for headings, you can adjust your CSS as follows:

font-family: 'Montserrat', sans-serif;

font-weight: 800;

Alternatively, you can implement a straightforward CSS override by selecting all text styles that have 'Heading' in their name and applying the new font family.

In Ant Design of React, the default font family for code and keyboard text elements is SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace. You can also use system fonts like -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

For a more custom experience, you can integrate the 'SF Pro Text' font, which is specific to Mac systems. This font provides a sleek and modern look for your Figma project.

By following these simple steps, you can add fonts to your Figma project and ensure consistency across all your design elements. Whether you're working on a React application or a standalone design file, adjusting font families and sizes is crucial for creating a visually appealing and user-friendly experience. With the Ant Design System for Figma, you have the flexibility to customize your font styles and sizes to suit your unique design needs.

Add fonts to figma