Add font-face via css-modules to rollup bundle

Question

So I'm trying to create a component library with rollup and I want a font to work that I have added via font-face.

I looked at this https://github.com/rollup/plugins/tree/master/packages/url but I can only find examples when using styled-components, and I have css-modules.

Then I found this thread: https://stackoverflow.com/a/61790221 But it does not seem to do anything when I add it.

I add my font-face in one of my components like this:

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: 400;
    src: url('../../shared/fonts/my-font.ttf') format('truetype');
}

How can I add it to my rollup bundle?

My rollup config looks like this:

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import dts from 'rollup-plugin-dts';
/* import url from '@rollup/plugin-url'; */
import url from 'postcss-url';
import copy from 'rollup-plugin-copy';

import pkg from './package.json';

export default [
  {
    input: './src/index.ts',
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ useTsconfigDeclarationDir: true }),
      babel({
        exclude: 'node_modules/**',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      postcss(),
      image(),
    ],
  },
  {
    input: './types/index.d.ts',
    output: [{ file: './dist/mycomponents.d.ts', format: 'es' }],
    plugins: [dts()],
  },
];

Please help :)

user_2906641 · Answer

Using @rollup/plugin-url, we could able to add fonts files to rollup bundle. In your rollup config file add the following.

This will look for all woff, woff2, ttf files and add it to the bundle.

import url from '@rollup/plugin-url';

plugins: [
    ...
    ...

    url({
      include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
      limit: Infinity,
      fileName: '[dirname][name][extname]',
    }),

    ...
    ...
  ],

Add font-face via css-modules to rollup bundle

1 Answers