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.

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

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:

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

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

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:

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

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.

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:

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

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:

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

We will end up with 2 files:

And now, let's upload them in Specify.

We now have working static font files in Specify 🥳