Purchased font in Hugo Academic not showing on all modern browsers/computers

Question

I am trying to use a purchased font in a Hugo Academic website, built with the hugodown R package, but it's only partially working. The font shows up fine in the Preview on RStudio, and on Chrome on my laptop (both on localhost and when deployed to netlify). However, it reverts to the fallback font on Safari on my laptop and on both Safari and Chrome on a different laptop (those are the only two browsers I’ve tested it with).

The purchased font is LEMONMILKPro (though I have the same trouble with all the fonts that I’ve tried to declare through @font-face, rather than using Google Fonts). The fallback font is Raleway.

Here's the set-up:

• font files (.woff, .woff2) saved in static/fonts
• @font-face declarations in assets/css/custom.css (and repeated for good measure in assests/scss/custom.scss):

@import url("//hello.myfonts.net/count/3c07c5");

@font-face {
  font-family: 'LEMONMILKPro-Medium';
  src: local('LEMONMILKPro-Medium'), url('fonts/LEMONMILKPro-Medium.woff2') format('woff2'), url('fonts/LEMONMILKPro-Medium.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-Regular';
  src: local('LEMONMILKPro-Regular'), url('fonts/LEMONMILKPro-Regular.woff2') format('woff2'), url('fonts/LEMONMILKPro-Regular.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-Light';
  src: local('LEMONMILKPro-Light'), url('fonts/LEMONMILKPro-Light.woff2') format('woff2'), url('fonts/LEMONMILKPro-Light.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-UltraLight';
  src: local('LEMONMILKPro-UltraLight'), url('fonts/LEMONMILKPro-UltraLight.woff2') format('woff2'), url('fonts/LEMONMILKPro-UltraLight.woff') format('woff');
}

• font theme (emk_font_set), saved in data/fonts and linked to in config/_default/params.toml, includes:

# Font families
heading_font = "LEMONMILKPro-Regular"
body_font = "LEMONMILKPro-UltraLight"
nav_font = "LEMONMILKPro-UltraLight"

• So that I can use Raleway as a back-up font when LEMONMILKPro, isn’t working, custom.css and custom.scss also contains

html {
  font-family: "LEMONMILKPro-UltraLight", "Raleway", sans-serif;
}

h1, h2, h3 {
  font-family: "LEMONMILK-Regular", "Raleway", sans-serif;
  text-transform: uppercase;
}

The whole set-up is at https://github.com/EllaKaye/hugodown-website.

The website itself is (temporarily) at https://gallant-shaw-c70134.netlify.app/.

I've pieced together what I've done so far from https://github.com/gcushen/hugo-academic/issues/1061 (though updated slightly for Hugo Academic v4.8) and https://css-tricks.com/snippets/css/using-font-face/. I've read at least a dozen posts/forum queries around this topic and haven't been able to resolve this issue.

I bought LEMONMILKPro and the appropriate licenses on myfonts.com which provided a webkit, including a css stylesheet (and the @import line above), but in order to (attempt to) get that working with Hugo, I’ve copied the contents of that into custom.scss and custom.css, and tweaked the @font-face declarations and the font file names and locations to match the above local fonts GitHub issue.

Any idea how to get my purchased working on all (modern) browsers on all computers? Thank you!