Loading Font from twind.config

[sbonnick]

Hi community.

I have been struggling with loading in a font that I can then use across a few lit-element based components which is then using twind "withTwind" extension. As such, to apply to all the components I am looking to include it in the twind.config so that it will then later be used during each components "install/setup".

Currently, I am attempting to do this as a rule:

{ rules: [
    ['@layer base', {
      '@font-face': {
        'font-family': 'Some Sans',
        src: "url('SomeSans-Regular.woff2')"
      }
    }]}

Eventually I plan to make this a sharable Preset (along with a bunch of other rules), so I've been looking at some plugins for reference on how they inject to the base layer. I am sure its probably just something simple I'm missing here on the structure of the rule itself.

any help appreciated.

[sastan]

Rules are for class bases style injection (a class name is used and then its styles are added to the stylesheet). What you want to use is the preflight option. Something like the following should work (not tested):

install({
	preflight: {
		'@font-face': {
        	'font-family': 'Some Sans',
	        src: "url('SomeSans-Regular.woff2')"
    	 }
	}
})

Edit: Here is an example: https://twind.run/slum-logo-saddle?file=config&result=css

[sbonnick]

Thanks that should work perfectly!

[sbonnick]

actually still fails with when using the install() from import install from '@twind/with-web-components'. I wonder if its not getting set correctly due to the shadow DOM of a web components? (Lit specifically)

[sbonnick]

after googling around, looks like the shadow DOM is the problem now. Thanks for the help, your solution still solved the root problem. ill keep playing around with my options to solve my shadow DOM problem.