Stripe Elements won't load my custom font

Question

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?

Answer 1

I fixed it like this:

<?php
header("Access-Control-Allow-Origin: *");

echo file_get_contents('https://example.com/AvenirNextLTPro-Bold.otf');

And then giving the url to this page to Stripe.