Elementor Custom Fonts - where am I going wrong?

Hi there - I'm a little confused about the optimal way to set up a custom font - hoping you can help me get my head around it. I'm using GeneratePress Pro with Elementor Pro with a child theme.

I installed a custom font, Monopol - https://www.myfonts.com/fonts/suitcase/monopol/ using Elementor custom fonts. I'm finding that when accessing the site the Monopol font is only loading sporadically and often reverting to the default font. I thought the issue was mobile/ios specific at first but I'm also seeing the issue on Firefox on the desktop.

The woff, woff2, ttf, eot and svg files are all in my media library -
https://feral.agency/wp-content/uploads/2019/06/398B2C_0_0.woff
https://feral.agency/wp-content/uploads/2019/06/398B2C_0_0.woff2
https://feral.agency/wp-content/uploads/2019/06/398B2C_0_0.ttf
https://feral.agency/wp-content/uploads/2019/06/398B2C_0_0.eot
https://feral.agency/wp-content/uploads/2019/08/39FA68_0_0.svg

- and they are all mapped in the Elementor custom font settings.

Do I need to update the theme CSS files as well to ensure the font always loads from my server? I'm using a Can you advise on the specific steps I should take to remedy the situation?

Really appreciate your help!