Rollup.js is not bundling my React Component Library fonts

Question

Everything works just fine when I view my React component library with Storybook. When I publish the library to the NPM registry, I install it into a dummy React app and everything works as expected except for the font. Below is my rollup.config.js plugins:

plugins: [
    external(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
    }),
    del({ targets: ['dist/*'] }),
    postcss(),
    url({
      include: ['**/*.woff'],
      limit: Infinity,
    }),
    copy({
      targets: [{ src: ['./src/fonts'], dest: 'dist' }],
    }),
],

Here is my font.scss

@font-face {
  font-family: 'CustomFontExample';
  src: local('CustomFontExample'),
    url('/fonts/CustomFontExample.woff')
      format('woff')
}

I believe the issue either lives within my Rollup.config.js or I'm not setting up my @font-face path correctly. I currently have it set to a relative path which works just fine when I view the components in Storybook.

Does anybody know how I can solve this issue?