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.
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.