Add font example and transforms/formats
See original GitHub issueShow 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:9
- Comments:6 (3 by maintainers)
Top Results From Across the Web
How To Load and Use Custom Fonts with CSS | DigitalOcean
But first, you will create example HTML to demonstrate the fonts. Begin by opening index.html in your text editor. Then, add the following ......
Read more >Add a font - Microsoft Support
To add new fonts to Word, import and install them in Windows, where they will automatically be available to all Office applications.
Read more >Adding a Custom Font to Your App - Apple Developer
Overview. Your app isn't limited to the custom fonts provided by iOS. If your company has its own branded font, for example, you...
Read more >font-face - CSS: Cascading Style Sheets - MDN Web Docs
Chrome Edge
@font‑face Full support. Chrome1. Toggle history Full support...
OpenType CBDT and CBLC rendering Full support. Chrome66. Toggle history Full support...
OpenType COLRv0 rendering Full...
Read more >Add a font as an XML resource - Android Developers
For example, to access a font resource, use @font/myfont , or R.font.myfont . ... To add fonts as resources, perform the following steps...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 loadyaml
files instead ofjson
) but I hope this might be useful for others.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!