Table of content
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.
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:
One with a respective weight of 480
One with a respective weight of 600
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:
One with a respective weight of 510 (Medium)
One with a respective weight of 590 (Semibold)
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.
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
Once installed we can run the following command to generate our 2 static font files from our variable font file called
fonttools varLib.mutator /Library/Fonts/SF-Pro.ttf wght=510 wdth=90
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
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:
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 🥳