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