Style-dictionary: Add font example and transforms/formats

[dbanksdesign]

Show how to use font tokens to set up custom fonts and font-related values in a Style Dictionary. For example:

• Defining font assets
• Format for @font-face css file
• font-weight transform
• Example iOS, Android, and Web consumption

[chazzmoney]

+1 on this

[radium-v]

Hello there,

I wrote a custom formatter that does this.

Formatter: https://github.com/jwplayer/jw-design-library/blob/master/scripts/formatters/font-face.js
Dictionary: https://github.com/jwplayer/jw-design-library/blob/master/dictionary/properties/font/font-face.yaml

We're doing a bunch of other weird things (like converting the TTF to WOFF and WOFF2 at build time, and we're overriding the require function to load yaml files instead of json) but I hope this might be useful for others.

[dbanksdesign]

Shut the front door. You are blowing my mind right now. 🤯

I'm going to poke around your code a bit. We have been thinking about Yaml support for a while, it might be time to add that in. It might be cool if you could contribute some of what you are doing with fonts into some of the built-ins. We are also thinking about a plugin architecture so people could release a plugin that adds formats, transforms, actions, other functionality so we don't have to keep adding things into the core library. This might be a good candidate for that too. Either way, super exciting what you are doing!

[Pinch1A]

any news on this ?

[dbanksdesign]

Unfortunately no :/ I haven't had time to spend on this. But if you look at what @radium-v posted, that would be a good place to start.