[question] How would you handle custom fonts with this setup?

[MagneH]

Hey! Great job with this repo. Looks really good!

I have some questions:

• How would you handle woff/woff2 imports in scss files with this setup?
• How would you handle global variables and mixins across exported components and package these in an efficient manner?

I think this is a pretty common use case, it would be great to see an example. :D

[HarveyD]

Hi MagneH,

Thank you for your questions!

1: In our work component library, I solved this problem by creating a global.scss file that might look like:

@font-face {
  font-family: 'Your Font Name';
  font-weight: normal;
  src: url('https://urltowoff.com.au/YourFont.ttf')
      format('truetype'),
    url('https://urltowoff.com.au/YourFont.woff')
      format('woff'),
    url('https://urltowoff.com.au/YourFont.woff2')
      format('woff2');
}

Which I then imported to index.tsx like:

import TestComponent from "./test-component/test-component";
import './global.scss';

export { TestComponent };

2: I've updated the library to include sass variables + mixins and examples of using the variables + mixins in the test component :)

[MagneH]

Thanks! Worked perfectly with hosted fonts. 👍 I still struggled with resolving relative paths to local font assets though. I might have missed something on how the url loader works.