Stripe Elements won’t load my custom font

I’m using this code to load a custom font for my Stripe card number element:

const elements = stripe.elements({
                    fonts: [
                        {
                            family: 'Avenir-Regular-Bold',
                
                            src: 'url('styles/AvenirNextLTPro-Bold.otf')'
                        }
                    ]
                });

And I’m getting this error about loading said font:

Access to font at ‘https://example.com/app/styles/AvenirNextLTPro-Bold.otf’ from origin ‘https://js.stripe.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have no idea what this means or why Stripe is saying this. Any way I can get my custom font to load?