How to inject custom <style> tag to the head

[victorlmneves]

I have a multi-brand project and the fonts used are injected as style tag on the head
I saw on the docs that for custom CSS we can do it like this import './src/assets/scss/index.scss'; on the histoire setup file

What I try to do but didn't work was something like this

const brandOneFonts = `
    <style>
        @font-face {
            font-family: Madera;
            src: url(/assets/yello/fonts/MaderaWebforYelloRegular.woff2) format("woff2"),
            url(yello/fonts/MaderaWebforYelloRegular.woff) format("woff");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
    </style>
`;
const brandTwoFonts = `
    <style>
        @font-face {
            font-family: EnbwDin;
            src: url(/assets/enbw/fonts/enbwdinwebpro.woff2) format("woff2"),
            url(enbw/fonts/enbwdinwebpro.woff) format("woff");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
    </style>
`;

const brandFonts = import.meta.env.VITE_APP_BRAND === 'brandOne' ? brandOneFonts : brandTwoFonts;

brandFonts;

How can I do this?
Thanks

[Akryum]

You can probably insert the style tag using JS? :p

[Akryum]

In the setup file yes.

And what about adding a class to the body tag

document.body.classList.add('...')

[victorlmneves]

The question was more because on Storybook there's a specific file to manage this.

[victorlmneves]

@Akryum there is a problem with this approach. This will inject/add the stuff on the app and on the iframe.
To avoid that we need to check if it's the iframe and only inject the code if true

const iframe = window.frameElement

if (iframe) {
   // inject classes on element and/or inject custom CSS
}

[Akryum]

Stories will not always render in a separate iframe, so it should be applied to both

[victorlmneves]

To be honest I didn't see that was possible to render directly on the app.
The problem is that injecting it "globally" has the side effect of applying the styles of "my" app to Histoire app.
For now, I will just inject on the iframe as for now I don't have any scenario that I would benefit from not using the iframe as I saw now on the documentation about the iframe topic.
Thanks

[alvarosabu]

Hi there, wouldn't be easier to add both font-faces and do the logic with different class themes?

.theme-1 {
 font-family: EnbwDin;
}
.theme-2 {
 font-family: Madera;
}

[victorlmneves]

we don't have the CSS structured that way.
If you want, you can check some of the boilerplate here https://stackblitz.com/edit/vitejs-vite-jwrbes