I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using #font-face in CSS.
I want to use the foundicons from zurb dot com so I hosted them at Amazon S3.
I set up the bucket to allow crossdomain access as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
And everything started to work seamless at webkit, trident and gecko... mostly: when browsing the web with firefox (version 17, 18 and 19 tested) all the icons fails randomly with this error:
Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
And I say randomly since after a full reload of the page (with control/command + R) every single icon appears normally to fail again after some visits.
Can anyone find the problem?
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.
see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs
try to use implemented base64-encoded fonts like:
#font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly.
I resolved the problem in Firefox (local resource access problem) using url: src: url("../fuentes/EurostileLTStd.otf"); instead of src: uri("../fuentes/EurostileLTStd.otf");.
Related
my custom font is not working, unless I install it manually in my computer.
//my css file//
#font-face {
font-family:'PROGRESS PERSONAL USE';
src: url('Progress.woff2')format('woff2'),
url('Progress.woff')format('woff'),
url('Progress.ttf') format('ttf');
}
Font family name is correct because, I opened the file font to check the correct spelling and also it shows correctly in the browser if I install the font and use it as:
h1{
font-family: "PROGRESS PERSONAL USE"
}
I thought that the problem was the path of the font files, so I placed them in the same folder and level as the CSS file. I also tried adding a / to the path like url('/Progress.woff2')format('woff2')... in front. Cleared caché, changed browser, and tried in mobile But not working.
Also in my browser inspector/Network shows that the fonts are found when refreshing the browser:
Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Would be happy to get help with this!
The self-hosted fonts in Gatsby should be located in the static folder.
So I placed the files in the path:
--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf
and then in my globalStyles.css which is in my src/ (not in the static folder) I place it like this:
#font-face {
font-family:"PROGRESS PERSONAL USE";
src: url('/fonts/Progress.woff2')format('woff2'),
url('/fonts/Progress.woff')format('woff'),
url('/fonts/Progress.ttf') format('ttf');
}
If you don't have a global css file you can define one for the fonts, and import it in your gatsby-browser.js.
Also there is the option of using the web fonts gatsby pluggin which is explained here
I want to design a website using html5 and bootstrap.In, and to my html code, I need Font-Awesome icons. But when I put font-awesome.min.css and corresponding fonts, the Font-Awesome icons did not load in my page.
So when I inspect that page, I get the following errors and warning on my console:
downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/regular.ttf style.css:9:1
downloadable font: download failed (font-family: "Roboto" style:normal weight:300 stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/roboto-light.ttf style.css:46:1
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/fonts/fontawesome-webfont.woff?v=4.2.0 font-awesome.min.css:4:14
downloadable font: download failed (font-family: "Open Sans" style:normal weight:bold stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Open%20Sans/OpenSans-Regular.ttf
How can I fix this issue?
Either address is wrong (or) configuration setting is missing
verify your address by checking it directly on the browser or simply put the source and refer the path.
refer this Downloadable font on firefox: bad URI or cross-site access not allowed
try to include font-awesome.css plugin not font-awesome.min.css because some time it shows error.
When you are including this plugin in your html file include it above of all script files some time it also create a problem.
Make sure correct format is used with the fonts.
For me the Firefox gave error:
downloadable font: rejected by sanitizer (font-family: "opensans-semibold" style:normal weight:400 stretch:100 src index:1) source: <path-to-font>/OpenSans-SemiBold.svg
Upon checking the file the format provided in format() for svg was incorrect:
url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("woff2");
So the format woff2 was provided for svg font which I corrected to:
url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("svg");
And the problem was gone!
Either address is wrong (or) configuration setting is missing
verify your address by checking it directly on the browser or simply put the source and refer the path.
refer this Downloadable font on firefox: bad URI or cross-site access not allowed
if you just add this line of code
<link href="fonts/fontawesome/all.min.css" rel="stylesheet">
inside of your page you just need go to the all.min.css and you can see there are some urls for fonts that you must inculde in your directory of your site.
I use laravel framework. But in chrome console this error happening and font-family not working.
Failed to load resource: the server responded with a status of 500 (Missing Content-Type Header)
In css:
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf);
}
After searching I found that adding format() can solve problem. and I changed to this :
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf) format(opentype);
}
Now error not showing in console but font-family still not working.
My file structure is:
public
css
fonts
Thanks.
If you don't get a 404 error for the asset, the issue is probably Chrome not liking the .otf font format.
You can generate a complete set of webfont types using the FontSquirrel Webfont generator: https://www.fontsquirrel.com/tools/webfont-generator
If you do get a 404 error you may need to add the necessary mimetypes for your server to be able to serve the fonts. Check out this little guide for how to enable this for apache or nginx:
https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts
Either way it's always worth having your .ttf and .woff fonts for cross browser compatibility, so definitely generate a complete font kit over at FontSquirrel.
today I tried hosting font-awesome css files and font files on my cdn, and run into a problem. When loading the page on the google chrome console it displays the following message below.
Font from origin 'http://cdn.craftrp.co.uk' 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://craftrp.co.uk' is therefore not allowed access.
I have added the following code to a .htaccess file, I have 1 in the root and 1 in the fonts folder with the following code inside the .htaccess file
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
I also tried the code suppleid by bootstrap, https://www.maxcdn.com/one/tutorial/htaccess-example-collection//
But still it remained to error...
I've just installed a fresh and clean Symfony app. I'm using NGINX as my webserver.
The stylesheets don't show a http 404 error code in devtools network-tab and i can see their content in the preview-tab correctly.
example picture:
Did someone face any issue like this? I'm guessing it might be a permission issue...
EDIT #1: Attached a picture of the chrome devtools showing the css are loaded correctly.
You need to make sure your nginx.conf actually includes the correct mime-types.
http {
include conf/mime.types;
# ...
... or ...
types {
# ...
text/css css;