question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add font example and transforms/formats

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:9
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

11reactions
radium-vcommented, May 31, 2019

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.

2reactions
dbanksdesigncommented, May 31, 2019

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found