I want to load 6 fonts, so i download the fonts and implement them inside my css file.
#font-face {
font-family: "TTNorms";
src: local('TT Norms Pro Regular'), url("../fonts/Copytext/TT\ Norms\ Pro\ Regular.otf") format("opentype");
}
After loading the css in set the different fonts to different areas like this
<div class="col" style="font-family TTNorms !important"> some text </div>
If I open the website local everything works perfectly but if I upload to webspace I get error Messages:
Failed to load resource: the server responded with a status of 403 (Forbidden)
I dont understand why the fonts arent loading with error 403.. there are license free. Is there something missing?
You are receiving a 403 error because your server is saying you don't have permission to access those fonts. To access them:
Clean up the path to your font files in the src: line of your CSS
On your server, update the permissions of your font folder (and fonts) to 755
Figure it out, if you have problems loading fonts, material design icons and appear message of 403 forbidden. You need to go AWS S3 click in your bucket go to Permissions> Block Public Access Settings and turn them OFF.
Then go to the files that you have problems with in the bucket and in action make them public. That will solve the problem loading fonts, material design icons, etc.
Related
I am unable to load a font file for my WordPress website. This happens specifically in Chrome browsers, Safari and others don't seem to share this issue.
The font files are located on the same folder where the rest of the assets and public files are contained. These load without any problem, images, css, javascript etc. Only font files seem to cause this problem.
The console shows the following error:
Access to font at 'https://example.com/wp-content/uploads/2019/08/font-file.otf' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As stated before, in other browsers, like Safari, the fonts load with no problem. I would like to solve this issue so it works across all browsers.
Check wordPress address and site address in your blog Settings > General settings.
Here whole answer:
https://wordpress.stackexchange.com/questions/278512/access-to-font-not-allowed-by-cors-policy
I am currently developing a website and have trouble showing my font-icons in firefox. every browser except for firefox can load and show my font-icons, but on firefox I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Me/Desktop/website/resources/dist/css/fonts/themify.ttf. (Reason: CORS request not http).
the path of the file is correct, as the browser lets me download the file when I enter the above listed URL. Anybody knows why I get this error?
Firefox 68 contains a security patch which restricts the kinds of files that pages can load (and methods of loading) when you open them from a file:// URL. This change was made to prevent exfiltration of valuable data within reach of a local page, as demonstrated in an available exploit. More info: https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
I filed a bug yesterday proposing that fonts be allowed, but it will take time to implement. For now, you can roll back the patch as follows:
In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
In the search box above the list, type or paste uniq
Double-click the privacy.file_unique_origin preference to switch the value from true to false
Firefox > 106 security.fileuri.strict_origin_policy set false
To mitigate the vulnerability: If you save pages from untrusted sites in a separate folder, e.g., Downloads\Untrusted, then it would be difficult for an attacker to find any valuable content using local file links.
As mentioned in the comment section, I installed a web server. In my case I used tomcat8 and using that I was able to display the icons even in firefox.
The easiest and safe way to overcome the temporary problem (It should be fixed in the next 68.0.2 Firefox update) with web fonts not loaded when previewing locally is to install .ttf or .otf version and link to it in your #font-face declaration. On Windows, go to /Control Panel/Fonts/ and check the exact name of your font, copy to the local('') value.
Example:
#font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 700;
src: local('Clear Sans Bold'),
url('../fonts/woff2-convert/ClearSans-Bold.woff2') format('woff2'),
url('../fonts/WOFF/ClearSans-Bold.woff') format('woff'),
url('../fonts/TTF/ClearSans-Bold.ttf') format('truetype')
}
I am having a problem with font embedding with CSS. I only have very few experiences with front end. Now I am about to deploy my website. But before I deploy it, first I uploaded all asset files like js,css and fonts to my CDN server. But my website is still on localhost. Then I changed all the asset link to my cdn link and I accessed my website on localhost. All javascript files on CDN are working perfectly with my local website. CSS files are also working fine except font embedding.
I am embedding font like this before I change links to CDN.
#font-face {
font-family: 'TharLon';
src: url(../fonts/tharlon.woff) format('woff');
}
.font-class{
font-family:'TharLon' !important;
}
It is working perfectly when all are on localhost.
Then I changed all links to CDN and embedded font like this
#font-face {
font-family: 'TharLon';
src: url('http://d3ewfjbf99d22n.cloudfront.net/assets/fonts/tharlon.woff') format('woff');
}
.font-class{
font-family:'TharLon' !important;
}
When I do this, font embedding is not
This is most likely because of CORS.
As you seem to be using an Amazon S3, you can add the required headers as follows:
Login to your Amazon account.
Choose your S3 Bucket
Click on Edit CORS Configuration
Add following code and save all settings
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.example1.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
From: https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/ (scroll down to S3 bucket)
It would appear your have a problem with CORS.
I just added this to a JSFiddle and I got this error:
Font from origin 'https://d3ewfjbf99d22n.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.
You have to be sure that your CDN accepts the OPTIONS method used by some browsers before get an endpoint.
In CloudFront (AWS) only GET and HEAD methods are accepted by default
just noticed on several websites that the font awesome icons aren's showing in Google Chrome. The console shows the following error:
Font from origin 'http://cdn.keywest.life' has been blocked from
loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://www.keywest.life' is therefore not
allowed access.
I found the exact same issue on several other sites. This can be easily fixed by replacing the own CDN reference with:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
-however, this is not the solution, just a workaround. I would love to know the reason and the right solution.
(the cause is this: the website is using it's own CDN, provided by MaxCDN and has the reference to the font awesome fonts and these are not loaded by Chrome, if you are loading the same resource from the Bootstrapcdn resource -mentioned above- it works)
here is a n example of the issue (in the menu and the social icons in footer: http://www.keywestnight.com/fantasy-fest )
Thanks for any help/explanatioon!
Here is the working method to allow access from all domains for webfonts:
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
The problem isn't with the CSS file, it has to do with how the font file is served. The font-awesome.min.css file has lines like
#font-face{font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0')
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0')
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal}
which cause the browser to request an appropriate font file (eot, woff, ttf or svg) from the same server as the CSS file. This is logical and correct.
However, when the browser requests that font file from cdn.keywest.life, it reads the headers for a Access-Control-Allow-Origin header and doesn't find one so it gives that error message. (This seems like a browser bug to me because it's coming from the same server as the CSS file).
Instead, when you use maxcdn.bootstrapcdn.com the response includes the Access-Control-Allow-Origin:* header and the browser accepts this font file. If your cdn server included this header then it would work too.
If you have an Apache server, see this answer: Font-awesome not properly displaying on Firefox / how to vend via CDN?
This issue of accessing font-awesome assets has been a problem for many people without a comprehensive explanation and resolution to the problem.
What is CORS:
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
The Problem:
The problem stems from how the font-awesome fonts are loaded.
#font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
The fonts are loaded via the stylesheet (CSS). The situation we have here is:
The Solution:
While CORS rules have been created on your file storage e.g. S3, and access to the resource has been given to the domain in question, when CDN tries to load the fonts specified in the CSS the origin/domain specified when loading these fonts is that of the CDN but no CORS access has given to the CDN domain.
Create a CORS rule for the CDN domain.
I use a CDN that doesn't allow me to modify its response, so I modified font-awesome.min.css, replacing relative path with absolute path and it worked.
None of the answers worked for me, I had to create an edge rule on maxcnd back office (which change config file on you zone)
More info here
https://www.maxcdn.com/one/tutorial/edge-rules-recipes/
https://www.maxcdn.com/one/tutorial/create-a-rule/
The solution to this is to use another cdn for fontawesome.
https://www.cdnpkg.com/font-awesome/5.11.0
If you're like me and using the official WordPress Font Awesome plugin, you'll want to go into settings and switch from "Use a CDN" to "Use a Kit".
I have spent hours trying to solve this and cannot come up with a solution.
I have fonts in a font folder within the css folder. BebasNeue is the name of the font. It displays fine from my local machine but will not display from my hostgator account. The case is correct and the file names match.
Here is the site: www.robertpauljensen.com/krjwoodcrafts.com
Check your permission on the font folder, i get 403