Customization

Font family

Learn how to change the font family of the entire Ant Design System for Figma project with the Figma Tokens plugin.

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 fontFamily token in the seed 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.
  6. Important! Font Family name, and Font Family Weight names need to match the names of the font family that Figma displays in Text settings. Otherwise, the plugin can have problems setting proper weights.
  7. Press the Update button in the Popup window.
  8. Press the Update button in the bottom right corner of the plugin.
  9. Wait a few minutes until the plugin updates, and all changes are applied.

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.

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.

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.