SVG is not picking up font

Question

I created an SVG from Adobe Illustrator then copied the xml for it, put it in a react component, and it renders.

But for some reason it's not picking up the PTSans-CaptionBold font in production. webpack-dev server somehow is picking it up (no idea how) but production is not.

After deploying the site, the font is indeed in my dist/lib/css/fonts folder but when the page renders this svg it's not picking up

function Logo({ width, height }: { width: string; height: string }) {
    const useLogoStyles = makeStyles(() => ({
        st0: { fontFamily: 'PTSans-CaptionBold' },
        st1: { fontSize: '832px' },
        firstCircle: { fill: '#D32527' },
        secondCircle: { fill: '#8CC63F' },
        thirdCircle: { fill: '#3E96D2' },
        st5: { fill: 'none' },
        st6: {
            fill: '#FDFEFE',
            stroke: '#595A5A',
            strokeWidth: 0,
            strokeMiterlimit: 10,
        },
        st7: {
            fill: 'none',
            stroke: '#595A5A',
            strokeWidth: 8,
            strokeMiterlimit: 10,
        },
        text: {
            fill: '#FDFEFE',
            fontSize: '832px',
            fontFamily: 'PTSans-CaptionBold',
        },
    }));

    const classes = useLogoStyles();

    return (
        <svg
            id="Layer_1"
            style={{ width, height }}
            version="1.1"
            viewBox="0 0 2122.38 2119.61"
            x="0px"
            xmlSpace="preserve"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            y="0px"
        >
            <text className={classes.text} transform="matrix(1 0 0 1 471.2415 582.3975)">
                Test
            </text>
            <circle className={classes.firstCircle} cx="200" cy="324.02" r="200" />
            <circle className={classes.secondCircle} cx="200" cy="1071.43" r="200" />
            <circle className={classes.thirdCircle} cx="200" cy="1800.02" r="200" />
            <line className={classes.st5} x1="200" x2="200" y1="524.02" y2="844.02" />
            <line className={classes.st5} x1="200" x2="200" y1="524.02" y2="844.02" />
            <line className={classes.st6} x1="200" x2="200" y1="524.02" y2="871.43" />
            <line className={classes.st7} x1="200" x2="200" y1="1271.43" y2="1600.02" />
        </svg>
    );