I am a recent user of Webpack and not a good JS coder yet I managed to get my fonts compiled by Webpack.
Actually in your CSS when you point to your font in “media” folder you are refering to the compiled asset in “public/packs/media” folder.
Though what you want is not to use the data in the public folder, you really want to compile that font so it eventually ends up in this folder.
Then instead of pointing to “/media/fonts/source-sans-pro/SourceSansPro-Regular.otf” you want instead to refer to your font in the javascript folder : “../fonts/source-sans-pro/SourceSansPro-Regular.otf” then you will see the font compiled properly and appear in “public/packs/media” folder.
NB: OTF is not the best compiled font format ( https://creativemarket.com/blog/the-missing-guide-to-font-formats ). You better version your font into WOFF and WOFF2 through this website : https://transfonter.org/
CLICK HERE to find out more related problems solutions.