I have font in my local space and try to change my html font with css #font-face and it worked on any browser, except firefox. It's just a simple html and css file and i don't have any server like apache.
How should i fix it?
#font-face {
font-family: 'iransans';
src: url('../fonts/IRANSansWeb.woff2') format('woff2'),
url('../fonts/IRANSansWeb.woff') format('woff'),
url('../fonts/IRANSansWeb.eot') format('embedded-opentype'),
url('../fonts/IRANSansWeb.ttf') format('truetype');
}
i got this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///P:/workspace/karAmuzi/karamuzi%20project%201/fonts/IRANSansWeb.woff2. (Reason: CORS request not http).
It is because of some security policy for Firefox browsers. It has a simple solution of disabling that policy. Search about:config in address bar. It will show a warning about voiding the browser's warranty and making it unstable. Take that risk. Now in the page search security.fileuri.strict_origin_policy and double click on it to turn its boolean value to false. This should solve your problem.
Related
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 trying to add 'MyriadPro' font using the #font-face. Here's the fiddle
HTML code:
<h1> Test Heading </h1>
CSS Code:
#font-face {
font-family: 'MyriadPro Regular';
src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
I've tried to test this locally, doesn't work, not sure what's missing.
You spelled MyriadPro as MyriaedPro
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
Edited
This is the error being displayed in the console.
Font from origin 'http://consumemarketing.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.
and this is the error being displayed in your fiddle.
Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.
You are trying to load the fonts locally, which is not allowed as the requested resource doesn't have a header and in your JSFiddle, it doesn't allow the font to load as it is from an insecure origin (http). So instead download the fonts locally and try using them, which works surely.
The website that you are trying to load the font(s) from is blocking the loading of the fonts onto your page as web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is basically a way for a remote host to control access to certain types of resources, so without the owner of the server that you are trying to access the fonts from modifying their .htaccess file to include the header to allow the CORS, you are unable to utilize these fonts from that server.
More info on CORS can be found here if you want to learn some more.
The simplest thing to do would be to download the fonts you have specified by placing the URL you used in the #font-face property in your browser and then putting them in the folder where your site's folder, and modifying the #font-face URL's to direct to your local folder.
For example if you were to download the fonts to your site's folder in a subfolder called /fonts, you would modify the #font-face src to the following:
#font-face {
font-family: 'MyriadPro Regular';
src: url('fonts/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
Apart from avoiding your issue, the other thing is that by storing the files locally, it greatly reduces the loading time for the user as it is not relying on the external server to provide the files.
Hope this clears everything up.
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
My MVC4 website uses a .woff font, which is stored locally within my Visual Studio project (RootFolder/Content/font/myfont.woff).
When I debug locally, it works fine (meaning, I can see the desired font).
I then publish to the remote server, test it and the font isn't doing what it should be doing. I can see the relevant text, but with the 'default' font
I logged onto my remote server, and have verified the files are there!
I know the font I'm using is not installed on the server, but that I don't think matters from what I've read.
My CSS is simply
#font-face {
font-family: corsive;
src: url("font/MT.woff") format('woff');
}
h1,h3 {
font-family: 'corsive';
font-size: 1.2em;
}
If I visit mysite.com/content/font/MT.woff then the browser tries to open it.
My site doesn't use SSL, so it's HTTP only.
The same issue persists in FireFox, Chrome and IE
How can I debug this issue?
IIS has security settings that by default deny access to any file extension that has not been defined in MIME types. As the direct link to the font file doesn't seem to work, but causes a 404, this might be the case.
Normally a .woff file extension has no MIME type set, so check the server configuration.
I am having an issue where a font that I am hosting from the same server the page is being served from, is not loading in IE9. However, this is not always the case. Most of the time it loads correctly. I noticed that when it does not get displayed correctly, IE9 loads the .eot? (see css about question mark), .woff and the .ttf font files. When the font is displayed correctly, it only loads the .eot? file. Here is my CSS
#font-face
{
font-family: Rokkitt;
src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot');
src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/Hormel/Fonts/rokkitt-bold-webfont.woff') format('woff'),
url('/Hormel/Fonts/rokkitt-bold-webfont.ttf') format('truetype'),
url('/Hormel/Fonts/rokkitt-bold-webfont.svg#rokkittbold') format('svg');
}
I also added the .woff to the IIS MIME type, before that I was getting an 404 error when trying to load the .woff file and it would not load the .ttf file and the font would still not display correctly.
From what I have read, IE9 is supposed to use the first .eot file, not the .eot?iefix file, is this correct?
I tried loading this font from the google font library but i was experiencing the same issues in terms of the font not always showing up correctly.
I don't know if this makes a difference, but I load the CSS on the landing page. When the user clicks on a certain element, I make an ajax call for the page to be displayed in a lightbox that appears. This is where the font is not displaying correctly. Also, when I try to inspect the content in the lightbox, the inspector says that the container, that is always on the page without any content loaded, is empty.
EDIT**
So when the fonts do not load, I get 3 CSS3117: #font-face failed cross-origin request. Resource access is restricted., one for the .eot?#iefix file, one on the .woff file and one of the .ttf file.
This is from Google and when I serve the font files from the same server as the web page.
I also load two other fonts from Google, but do not have any issues with them. Just the Rokkitt font.
I added
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
To the web.config file and added Access-Control-Allow-Origin to the response header on the server.