Self Hosted Font in material-ui theme component library not working - reactjs

Question

I'm building a component library to sit alongside some react apps within a monorepo, library is currently being consumed by app1 and displaying components exported from the library just fine.
The library is based on masterial ui and themed. I'm using storybook and rollup for documentation and bundling, which means having to cater to both webpack (for storybook) and rollup for the actual library build.
.storybook/main.js:
module.exports = {
stories: ['../src/**/**/*.stories.mdx', '../src/**/**/*.stories.tsx'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'storybook-addon-designs'
],
webpackFinal: (config) => {
// Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
const fileLoaderRule = config.module.rules.find(
(rule) => rule.test && rule.test.test('.svg')
)
fileLoaderRule.exclude = /\.svg$/
config.module.rules.push(
{
test: /\.svg$/,
enforce: 'pre',
loader: require.resolve('#svgr/webpack')
},
{
test: /\.(woff|woff2|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: require.resolve('file-loader'),
options: {
// Limit at 50k. Above that it emits separate files
limit: 50000,
// Output below fonts directory
name: '[name].[ext]',
outputPath: '../src/build/fonts/'
}
}
]
}
)
return config
}
}
And my rollup.config.js:
import commonjs from '#rollup/plugin-commonjs'
import resolve from '#rollup/plugin-node-resolve'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import typescript from 'rollup-plugin-typescript2'
import svgImport from 'rollup-plugin-svg-hyperscript'
import url from '#rollup/plugin-url'
import packageJson from './package.json'
export default {
input: './src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript(),
svgImport(),
url({
include: ['**/*.woff', '**/*.eot'],
name: '[name].[ext]'
})
]
}
It should be noted that I have an Icon component that works with SVGS being bundled with rollup and displaying in storybook perfectly.
Font index:
import soehneWebKraftigWoff from './soehneWebKraftig.woff'
import soehneWebKraftigEot from './soehneWebKraftig.eot'
import soehneWebLeichtWoff from './soehneWebLeicht.woff'
import soehneWebLeichtEot from './soehneWebLeicht.eot'
export const fonts = {
soehneWebKraftigWoff,
soehneWebKraftigEot,
soehneWebLeichtEot,
soehneWebLeichtWoff
}
MuiCssBaseline:
import { fonts } from '../../fonts'
export const soehneWebKraftig = {
fontFamily: 'SoehneWebKraftig',
fontStyle: 'normal',
fontWeight: 400,
src: `url(${fonts.soehneWebKraftigWoff}) format('woff')`
}
export const MuiCssBaseline = {
'#global': {
'#font-face': [soehneWebKraftig]
}
}
The override is being indexed and exported from a folder called 'overrides' so this is my theme file:
import { createTheme } from '../../themeUtility'
import { rootPalette } from './rootPalette'
import { rootTypography } from './rootTypography'
import * as overrides from './overrides'
export const rootTheme = createTheme({
palette: rootPalette,
typography: rootTypography,
overrides: {
...overrides
}
})
The font is not loaded correctly in either storybook or in the rollup bundle (I can't see the font displaying correctly in app1 which consumes the bundle). I can see my font files renamed with hashes appearing in the rollup build output directory.
Any ideas?
Edit:
Fonts within build (but not inside the fonts folder?)