Font family

How to change the font family of the entire project?

Thanks to the Figma Tokens plugin, you can easily change the font family of the entire system in a few minutes. For example, let’s change the Font Family of the UI kit from SF Pro Text to Work Sans.

1. Open the Figma Tokens plugin.
2. Find a font-family token in the default / theme set in the Font Family section inside a plugin.
3. Right-click on it and choose the Edit Token option.
4. The popup window will appear with the Name, Font Family, and Description input fields.
5. In the Font Family input, enter Work Sans. Important! It needs to match the name of the font family that Figma displays in Text settings.
6. Press the Update button in the Popup window.
7. In the plugin, below the Font Family section, you will find the Font Weight section.
8. Make sure that regular and semibold tokens have precisely the same font-weight names as the font family you picked. You can check the name of the font weight in Figma’s Text settings. For example, if your font family uses the SemiBold name, you need to Edit the semibold token’s name to be SemiBold, not Semibold.
9. Press the Update button in the bottom right corner of the plugin.
10. Wait a few minutes until the plugin updates, and all changes are applied.

How to add font family URL for Figma Tokens Code Sync?

If you are using Figma Tokens Code Sync, you need to reference your font URL in the font-family token settings. Doing so will allow you to import the proper font in the code.

Default font

By default, Ant Design (React) is using a system font, and Ant Design System for Figma uses macOS’s system font, SF Pro Text. In Figma Tokens, if you want to use the default system font for your code project, make sure to have ‘use default’ text in the font-family token description field.

Google font

If you want to use Google font in your project, you must include the @import URL (from Google fonts) in your font-family token description field. For example, to set font-family token to Work Sans you need to add this URL in your token description field: https://fonts.googleapis.com/css2?family=**Work+Sans:ital,wght@0,400;0,500;0,600;1,400** &display=swap

Local font

If you want to use a local font in your project, you must include the folder path to the font file in your font-family token description field.