Problem:
Resolving fonts which are inside assets folder results 404 Not Found error.
http://server.com/assets/fonts/Bold/RobotoCondensed-Bold.woff2
It work though on local development:
http://localhost/assets/fonts/Bold/RobotoCondensed-Bold.woff2
Details:
I have got some fonts which are inside assets folder.
They are correctly copied to docker image path: /usr/share/nginx/html/assets/fonts/Bold/RobotoCondensed-Bold.woff2
If I request http://server.com/service/assets/fonts/Bold/RobotoCondensed-Bold.woff2
then my font is retrieved. /service prefix is example name of which service is served.
Base href changes on local dev from <base href="/"> to <base href="/service/"> on server.com
How should I fix this problem. I could try changing url from /assets/fonts/Light/RobotoCondensed-Light.woff to service/assets/fonts/Light/RobotoCondensed-Light.woff but during local development this prefix does not exist so i my fonts would stop working on local environment.
Also I want to mention that my favicon.ico is correctly served.
On local environment front asks without prefix and on server it requests favicon with prefix /service. Favicon is only mentioned inside index.html:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
_fonts.scss file:
#font-face {
font-family: 'Roboto Condensed';
src: url('/assets/fonts/Light/RobotoCondensed-Light.woff2') format('woff2'),
url('/assets/fonts/Light/RobotoCondensed-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
angular.json file:
"assets": [
"projects/service/src/favicon.ico",
"projects/service/src/assets"
],
"styles": [
"projects/service/src/assets/scss/modules/_fonts.scss"
],
I am pretty new to angular and frontend and cannot solve this issue.
Any help very appreciated.
I needed to use relative path in my urls
ex.
./assets/fonts/Light/RobotoCondensed-Light.woff
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 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.
I made an rails (4.2.4) app which work fine in development environment but when I deployed it on digital ocean it doesn't get fonts, with an error like
Failed to load resource: the server responded with a status of 404 (Not Found)
with path like
http://Server-IP/assets/raleway-bold.woff2
I tried many combinations to provide path but all in vain except one, which works in development but not in production.
I have little different structure for assets
assets
- fonts
- javascripts
- stylesheets
- admin
- web
- application.js
- fonts.cs
- application.cs
and in fonts.cs I am providing path like
#font-face {
font-family: 'dpdidot_htfm96medium';
src: url('/assets/dp_didot-htf-m96-medium-webfont.eot');
src: url('/assets/dp_didot-htf-m96-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/dp_didot-htf-m96-medium-webfont.woff2') format('woff2'),
url('/assets/dp_didot-htf-m96-medium-webfont.woff') format('woff'),
url('/assets/dp_didot-htf-m96-medium-webfont.ttf') format('truetype'),
url('/assets/dp_didot-htf-m96-medium-webfont.svg#dpdidot_htfm96medium') format('svg');
font-weight: normal;
font-style: normal;
}
Whats wrong with it
Got it. The default precompiling assets with Rails will only generate application.js and application.css. If you want the precompile generate unpacked assets like the fonts, add it to the Rails.application.config.assets.precompile this is the example. You can add this to assets.rb
Rails.application.config.assets.precompile += ['*.js', '*.css', '*.woff2', '*.woff']
I have a css which contains this:
font.css.erb
#font-face {
font-family: 'thsarabun';
src: url('<%= asset_data_uri('THSarabunNew.woff') %>');
}
Everything works fine in the development environment.
But when I want to use it in production environment. I decided to use passenger with Apache2, I want the app to be located at http://localhost/rails-app When I precompile the assets with this command:
RAILS_ENV=production rake assets:precompile
I got the application-<hash>.css like this:
#font-face{
font-family:'thsarabun';
src:url('/assets/THSarabunNew-<hash>.woff');
}
which URL is wrong, instead, it should be /rails-app/assets/THSarabunNew-<hash>.woff.
How can I fix this?
Regards, Sarun
To run your Rails app from a subdirectory you need to change the config.
If it is just on localhost that you want this put the following in config/environments/production.rb:
YourAppName::Application.configure do
...
config.action_controller.relative_url_root = '/rails-app'
end
See if that works for you.
You can set the asset prefix value in config/production.rb. The default is '/assets'. So in your case it would be:
config.assets.prefix = "/rails-app/assets"
I can't get font-awesome to display properly in firefox, even in localhost. I'm receiving the following cross domain error:
Timestamp: 08/08/2012 02:49:37 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
#font-face { font-family: "FontAwesome"; font-style: normal; font-weight: normal; src: url("../font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg"); }
I used double quotes as suggested by this post: firefox #font-face fail with fontawesome but that didn't resolve the problem.
Everything works fine in Chrome; any suggestions?
Beyond fixing the problem in Chrome, how should I vend font-awesome over a CDN given this restriction: http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction?
Below is the code from my CSS file:
#font-face {
font-family: 'FontAwesome';
src: url("../font/fontawesome-webfont.eot");
src: url("../font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
url("../font/fontawesome-webfont.woff") format('woff'),
url("../font/fontawesome-webfont.ttf") format('truetype'),
url("../font/fontawesome-webfont.svg#FontAwesome") format('svg');
font-weight: normal;
font-style: normal;
}
Thanks for your help!
This solved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccess or directly to apache config:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
There is a webpage with instructions on how to set up CORS with different servers:
https://enable-cors.org/server.html
I've usually found adding a local declaration fixes this, as per this.
e.g.:
#font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
I'm sure the Apache config method is more correct, however you may not be using Apache or may not have the ability to make such overrides.
If you're building a rails app (or some other rack based app) take a look at https://github.com/cyu/rack-cors Super easy to get up and running. You can throw it into application.rb or one of the environment files.
If you're using AWS Cloudfront as in my case, you'll need to add a CORS Policy. S3 intentionally won't allow you to set the headers during upload because you need to use the policy instead.
This policy configuration should do the trick for you:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
This will get Font-Awesome working from a CDS on Firefox and Internet Explorer (IE).
I was having the same issue on magento 2.0. It was working fine on https but not on http. In order to allow font-awesome icons to load on http. I added following in the .htaccess situated on root directory of magento installation.
<FilesMatch ".(ttf|otf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>