This question already has an answer here:
CORS errors from Font Awesome font in Angular app
(1 answer)
Closed 4 months ago.
I have checked what I could find about font CORS errors (like CSS - Font being blocked from Cross-Origin Resource Sharing Policy), and it seems CORS errors are result of server mis-congiguration (or missing configuration).
I develop a web application. When I test it locally with my own server, it works fine. When I try a server-less version with IntelliJ IDEA debugger, which uses its own integrated web server, I get CORS error:
Access to font at 'https://code.cdn.mozilla.net/fonts/woff/FiraSans-Bold.woff' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is this a bug in IntelliJ, or is there something missing in my page setup?
The error can be seen when debugging following HTML:
<html>
<head>
<meta charset="UTF-8"/>
<title>Loading...</title>
<link href="https://code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet"/>
<style>
h1 {
font-family: "Fira Sans", sans-serif;
}
</style>
</head>
<body>
<h1>Loading...</h1>
</body>
</html>
Maybe this can help you:
"When debugging, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if Allow unsigned requests in Settings | Build, Execution, Deployment | Debugger is enabled, so, if you are facing issues because of this header, you have to turn this option on"
I found this answer on this page discussing CORS errors on IntelliJ IDEs
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.
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>
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>
I want to have a custom font (HP Simplified Light) for my webpage. I have the font file uploaded to Dropbox, and I have the link here.
But nothing happens. I get Times New Roman as the font. I've tried testing locally, both hosting the font locally, and the HTML document, but with the same effect.
<html>
<head>
<style>
#font-face {
font-family: HP Simplified;
src: url('http://dl.dropboxusercontent.com/s/dau4s6y033jkg4y/HPSimplified_Lt.ttf');
}
h1 {
font-family: HP Simplified
}
</style>
Hello world!
</html>
Your CSS is only styling h1 elements with the font HP Simplified. The text "Hello world!" is not a h1. Either you can make it so:
<h1>Hello world!</h1>
Or you can have the CSS style everything with the font:
* {
font-family: HP Simplified
}
This is the error I get in chrome:
Redirect at origin 'http://dl.dropboxusercontent.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'Null' is therefore not allowed access.
Download the file and host it locally. Also be sure to put the tags around your text and include a ; at the end of your font-family css. I did all that and it works. Example: http://catsarecrits.com/test.html
When I checked your font, it looks like an ordinary font and not a webfont. Correct me if I am wrong.
The othher possible reason is that Drop box have blocked your font file from being accessed on random location.
I have uploaded your font and converted it to different webfont formats.
test link
http://files.coderinthebox.com/webfont/
zip files
http://files.coderinthebox.com/webfont/webfontkit-20150531-215129.zip
My HTML is in local system and pointing to css
<link rel="stylesheet" href="http://nagasystems.in/tamil/stylesheet/common.css" type="text/css" charset="utf-8" />
My font path folder is
http://nagasystems.in/tamil/stylesheet/
i have following fonts in it
bamini-webfont.eot
bamini-webfont.svg
bamini-webfont.ttf
bamini-webfont.woff
bamini-webfont.woff2
Now if i load the local HTML in browser the font is not loading ... Tested in all browsers.. However if html , css and font are in online it works or if all three are in local it works ..
Check below the link for all three being in online that works
http://nagasystems.in/tamil/
Kindly help me please .. Breaking my heads out for solution ...
Update : Error in chrome console "Font from origin 'nagasystems.in'; has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access"
Try Adding the following line to .htaccess file in the same folder of style sheet
Header set Access-Control-Allow-Origin "*"
It will allow the header from all locations (*)
I am building a website and I attempting to get cross-browser compatibility with a free font named Tex Gyre Cursor.
So far I have tried several ways which I have found searching though Google.
Site 1, Site 2 & Site 3
They have worked when testing them locally on Chrome, Firefox, Safari and Opera. Not on IE though. I'm not to bothered about IE since it's a massive pain in the arse and I have set Tahoma as the back-up font for this.
The problem arises after I have uploaded my files via FTP File Manager. The web host is GoDaddy.
I have uploaded the font files too.
I visit the site but the font is Tahoma, this occurs on all browsers previously mentioned.
I'm at my wits end and cannot discern the problem.
This was my first attempt with the CSS:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: local('texgyrecursor'),
local('texgyrecursor'),
url('fonts/texgyrecursor.ttf') format('truetype'),
url('fonts/texgyrecursor.svg#font') format('svg'),
url('fonts/texgyrecursor.otf');
}
My second attempt:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: url('fonts/texgyrecursor.otf');
}
If anymore information is needed please let me know :)
I recently had this issue, I was designing on windows machine with xampp and uploading to linux server.
I finally figured out that the font files were CamelCase and the css code was all lowercase.
It didn't bother my local machine, but linux sees CAPITALS.font and capitals.font as 2 seperate files.
You might want to check to see if that is issue your having.
I have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !#?#.
In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:
CSS3111: #font-face encountered unknown error.
my-font.eot
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
my-font.eot?
I'd suggest following a thread I opened a few months ago which might help: #font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.
For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:
#font-face {
font-family:'My-Font';
src:url('../includes/fonts/my-font.eot');
src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/my-font.woff') format('woff'),
url('../includes/fonts/my-font.ttf') format('truetype'),
url('../includes/fonts/my-font.svg#my-font') format('svg');
font-weight:normal;
font-style:normal;
}
just wanna help you guys quick,
First: Put this in .htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Secondly: Go to where you have hosted the site, in my case it's cpanel and check for the file permission, it should be 755 from the fonts folder till the font(s).
There shouldn't be any errors with the code; it should be a browser or network problem.
Try clearing all the cache and reloading the page several times.
If that still doesn't work, go to Chrome, load the page, press F12, go the the Network tab, and reload the page. See if the browser loads the font CSS file and the fonts.
If there is a 404 Not Found error, point your browser to the font files directly (yourdomain.com/fonts/texgyrecursor.ttf).
If you can't access the font file directly, check whether or not you've uploaded it. Then check the permissions of the file.
If that still doesn't work, try to add the <link> tag that Google Webfonts provides, then uploading.
Hope that fixes it!
Exactly! the solution is to call fonts from css respecting case sensitive. for example is not the same call like this: url (font / arial.ttf) a ARIAL.TTF file must be url (font / ARIAL.TTF)
I've just had the same problem, turns out there was a capital letter on my "Fonts" folder, I renamed it woth FileZila and now it works just fine!
The server has utf8 support. So, it is not necessary to install language fonts separately. If you need an additional fonts to be installed in your website upload the font file in your websites font folder. But, if any language is not supporting than you need to enable the support of utf8 on you server. You can do it by putting below mentioned code in head tag-
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
I've had the similar issue - and just resolved it by replacing the font URL/path.
1. add this into your head tag
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
identify your font family on your script, you can find it on the font link/url on your script.
this is mine:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>
from the above details, I can find the font family is ROBOTO.
then I visit GoogleFont Website - then find my required font.
my font:
search font: roboto
category: sans-serif
once you found the required font - click on the 'select this style' button, then you will get the link/path like this:
link rel="preconnect" href="https://fonts.googleapis.com"
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet"
copy it to your script.
clear your browser cookies/cache or try it on private browser (incognito)