How to manage variable fonts

Learn how to sync a variable font from Figma to Specify

Updated over a week ago

Table of content


You can use variable fonts in Figma. Either Figma provides the variable font by default (e.g., Fraunces) or you have a custom variable font locally installed on your computed (e.g., SF Pro).

Let's see how you can sync variable fonts from Figma to Specify.

Case 1: Your variable font is in Figma by default

If your variable font is natively available in Figma it means that under the hood it comes from Google Fonts.

A variable font called "Fraunces" used in Figma

Whether you're using this font on a text style or on a text frame Specify will be able to detect it and download its corresponding weight.

Let's say you have 2 text styles based on Fraunces:

  1. One with a respective weight of 480

  2. One with a respective weight of 600

An example text layer using the variable font "Fraunces" with a wieght of 480.

When syncing our text styles from Figma, Specify will detect 2 static fonts:

  • Fraunces-Regular (weight closest to 480)

  • Fraunces-SemiBold (weight closest to 600)

And you'll end up with 2 static font files (Regular and SemiBold) stored in Specify.

Case 2: Your variable font is custom and used in Figma

Now, let's pretend you have a variable font file locally installed on your computer and detected by Figma as a variable font (e.g., SF Pro by Apple).

Let's say you have 2 text styles based on SF Pro:

  1. One with a respective weight of 510 (Medium)

  2. One with a respective weight of 590 (Semibold)

When syncing our text styles from Figma, Specify will detect 2 custom static fonts:

  • SFPro-Medium

  • SFPro-Semibold

So you'll be asked to upload font files for each detected fonts by Specify.

The issue is you only have a single font file containing all font subfamilies.

We now have to generate static font files from a variable font file and import them in Specify.

Generating static font file from a variable font

We'll use a tool called fonttools to do this. We can use it through the official CLI.

Find the path of your variable font file from your font book on Mac OS. In Mac OS, your font files are likely to be stored in /Library/Fonts/.

Once installed we can run the following command to generate our 2 static font files from our variable font file called SF-Pro.ttf:

  • SFPro-Medium: fonttools varLib.mutator /Library/Fonts/SF-Pro.ttf wght=510 wdth=90

  • SFPro-Semibold: fonttools varLib.mutator /Library/Fonts/SF-Pro.ttf wght=700 wdth=90

Fonttools generates your static font files in the same directory as your variable font as a file named SF-Pro-instance.ttf.

Finalizing our static font files

Our static font files we generated will still be considered as the "SFPro-Regular" font by Specify.

Indeed, a font file family is not detected by its filename but by a metadata stored in the font file itself called the font PostScript name.

We can see and update a font PostScript name with a software called FontForge.

Open your generated static font files in FontForge and click on Element > Font Info. You will see the following window with the font PostScript name:

Let's update the Fontname field by what Specify is asking for:

  • SFPro-Regular

  • SFPro-Semibold

Now let's generate the font file with FontForge by clicking on File > Generate Fonts...

We will end up with 2 files:

  1. SFPro-Medium.otf

  2. SFPro-Semibold.otf

And now, let's upload them in Specify.

We now have working static font files in Specify 🥳

Did this answer your question?