Using Webpack, urls to font files using @Font-face being converted to data and included in the final CSS file

[completewebco]

I am using postcss plugins with Webpack to build the final css file with Tailwind CSC and in one of my css files I am using @font-face to bring in my fonts. When webpack compiles the CSS file the fonts are being included in the final CSS final as data and not an actual link to the font file. This is increasing the final CSS file even after using PurgeCSS to almost 300kb when it should be around 30kb. Why is this happening?

Here is the built result:

From this:

@font-face {
font-family: Brown;
src: url(../fonts/lineto-brown-regular.woff);
font-weight: 300;
}

to this:

@font-face {
font-family: Brown;

src: url(data:font/woff;base64,d09GRgABAAAAAP4oABMAAAACktQAAAA...........(huge string of font data)

font-weight: 300;
}

Thank you for any help on this