Question - How to produce fontFamilies? about design-token-transformer

[lukasoppermann]

What do you mean by multiple font families?

One type style may only refer to one family.

design-token-transformer/src/web/webFont.js

Line 3 in 562bfc6

const fontFamily = ({ fontFamily }, { fontFamilies } = {}) => fontFamilies && fontFamilies[fontFamily] ? fontFamilies[fontFamily] : fontFamily

What happens in this file is that you can replace the figma font-family name. E.g. if figma exports "helveticaNeue" but you need it to be "Helvetica Neue" to work on the web, this function can help.

[derekwsgray]

Sorry, my question was not clear. My desire is to have CSS with fallback fonts: IBM Plex Sans, "Helvetica Neue", sans-serif

i.e., my current output is like:
--mytheme-font-h1: 400 2.625rem/3.375rem IBM Plex Sans

But I want:
--mytheme-font-h1: 400 2.625rem/3.375rem IBM Plex Sans, "Helvetica Neue", sans-serif

I have a silly hack right now that looks for "sans" or "mono" in the font name and appends some hard-coded fallbacks based on that, but it would be a lot better if I could specify that in Figma.

[lukasoppermann]

Sadly I don't see a way of how this could be specified within Figma.
I am doing the same with the webFont.js
it used the options provided in the config file for style dictionary. https://amzn.github.io/style-dictionary/#/config?id=platform

So within this options object I would define 'IBM Plex Sans': 'IBM Plex Sans, "Helvetica Neue", sans-serif' and the webFont.js would replace it.

You may be able to use a comment on the type styles and read this in a custom transformer, but I have not done this yet.