font-face are not working with rollup config - component library

user_9299127 0
Viewed 2556

I have custom component library written in React (rollup to build). I don't want to use createglobalstyle BCS its broke performance in an external project. I added CSS file with font-face (relative path) but these fonts are not working in external projects. Do u have any idea how to fix it? src

  • components (folders)

  • index.css with

    @font-face { font-family: 'font1'; font-display: swap; font-weight: 900; src: url(assets/fonts/font1/heavy/heavy.woff2) } h1{ margin: 2.75rem 0 1.05rem; font-family: 'font1'; font-weight: 400; line-height: 1.15; color:red; }

Rollupconfig plugins :

[    postcss({
        extract: false,
        plugins: [autoprefixer]
    }),
    babel({
        exclude: 'node_modules/**'
    }),
    localResolve(),
    resolve({
        browser: true
    }),
    commonjs(),
    filesize(),
    copy({
        targets: [{ src: 'src/assets', dest: 'build' }]
    }),
    url({
        // by default, rollup-plugin-url will not handle font files
        include: ['**/*.woff', '**/*.woff2'],
        // setting infinite limit will ensure that the files 
        // are always bundled with the code, not copied to /dist
        limit: Infinity
      }),
      modulepreload({
        prefix: 'fonts',
        index: 'src/assets/fonts/font1/heavy/heavy.woff2',
      })

];

When I use that library in external projects I see all style like color:red etc. but font-face is not working :(

rollup reactjs fonts css
1 Answers

I have the feeling that you just wrongly entered the source of your font.

Try something like this:

@font-face { 
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url("../assets/fonts/font1/heavy/heave.woff2");

}

user_140874480
Related