font face not working in local not in server - html

Question

I used font-face, and it is not working. I used the following code in internal CSS:
#font-face {
font-family: acme;
src: url(https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf);
}
My html code is below:
<p style="text-align:center; font-family: acme; font-size:28px; color: #4D4B4B;">TYPICAL MEETING ROOM</p>
When I use this in local it works fine, but when upload the fonts to the server and when I get the fonts from the server it won't work. Please anyone give a solution for this.

Answer 1

Retrieving the font from that Amazon S3 URL results in the CORS error below. Note that the null is just there because I'm testing from a stack snippet. In your case, it will most likely be replaced with your domain.
Access to Font at
'https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf'
from origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
To be able to retrieve your font, you need to configure cross-origin resource sharing on your S3 bucket, as described here in the Amazon S3 documentation.
The following configuration allows GET requests to all origins (which might be too liberal, depending on the contents of your bucket):
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Answer 2

Use this code. It should work perfectly
#font-face {
font-family: 'acme';
src: url('https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf');
}
<p style="text-align:center; font-family: 'acme', arial; font-size:28px; color: #4D4B4B;">TYPICAL MEETING ROOM</p>