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']
Related
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
I am trying to upgrade grails project from 2.x.x to 3.1.8 and my font-awesome is not resolved. I downloaded font-awesome zip from internet and put fonts to file to /assets/fonts and than I put font-awesome.css to my css.
I also added added:
grails.resources.adhoc.patterns = ['/images/', '/css/', '/js/', '/plugins/', '/fonts/*']
grails.resources.adhoc.includes = ['/images/', '/css/', '/js/', '/plugins/', '/fonts/**']
to my application.groovy.
Here is my error:
Failed to decode downloaded font: http://localhost:8080/dist/tjicons.ttf?bf6f8c5837e0c76e84bd8c564a18c8e5(index):1 OTS parsing error: invalid version tag
Any ideas?
PS: Resource plugin was used in grails 2.
EDIT:
Font-awesome.css:
#font-face {font-family: 'FontAwesome';src: url('../fonts/fontawesomewebfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');font-weight: normal;font-style: normal;
application.css:
*= require_self
*= require bootstrap
*= require font-awesome
*= require_tree .
I'm having trouble figuring out how to integrate a wrap bootstrap file into my rails 4 app.
I have a folder in my vendor assets called fonts.
In it I have several files on is called the following:
ActionController::RoutingError (No route matches [GET] "/assets/vendor/assets/fonts/Simple-Line-Icons.woff"):
I my vendor/assets/stylesheets, I have a file called simple-line-icons.css, which has:
#font-face {
font-family: 'Simple-Line-Icons';
src:url('vendor/assets/fonts/Simple-Line-Icons.eot');
src:url('vendor/assets/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
url('vendor/assets/fonts/Simple-Line-Icons.woff') format('woff'),
url('vendor/assets/fonts/Simple-Line-Icons.ttf') format('truetype'),
url('vendor/assets/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
font-weight: normal;
font-style: normal;
}
When i save everything, and precompile assets, my console error log shows:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
Can anyone see what needs to happen to get this to work?
Taking the suggestion below, I now have:
#font-face {
font-family: 'Simple-Line-Icons';
/*src:url('vendor/assets/fonts/Simple-Line-Icons.eot');*/
src:asset-url("fonts/Simple-Line-Icons.eot");
src:asset-url("fonts/Simple-Line-Icons.eot?#iefix") format('embedded-opentype'),
asset-url("fonts/Simple-Line-Icons.woff") format('woff'),
asset-url("fonts/Simple-Line-Icons.ttf") format('truetype'),
asset-url("fonts/Simple-Line-Icons.svg#Simple-Line-Icons") format('svg');
inside simple-line-icons.css.erb
but i still get 404 error
add .erb to the end of your css file, then change url('vendor/assets/fonts/Simple-Line-Icons.eot') to asset-url("fonts/Simple-Line-Icons.eot") and same as the others. I think the problem is after you precompile the file, rails will add a random token to the file such as "/assets/application-908e25f4bf641868d8683022a5b62f54.js", so if you are using 'vendor/assets/fonts/Simple-Line-Icons.eot', you cannot find the file.
update
change your simple-line-icons.css.erb file to simple-line-icons.scss then
#font-face {
font-family: 'simple-line-icons';
src: asset-url('Simple-Line-Icons.eot?v=2.2.2');
src: asset-url('Simple-Line-Icons.eot?v=2.2.2#iefix') format('embedded-opentype'), asset-url('Simple-Line-Icons.ttf?v=2.2.2') format('truetype'), asset-url('Simple-Line-Icons.woff2?v=2.2.2') format('woff2'), asset-url('Simple-Line-Icons.woff?v=2.2.2') format('woff'), asset-url('Simple-Line-Icons.svg?v=2.2.2#simple-line-icons') format('svg');
font-weight: normal;
font-style: normal;
}
at the end in your application.css file add the following:
*= require simple-line-icons
because apparently require_tree . will not require the file in your vendor and lib folder
Scenario: I have a Rails 4.0.0 application, deploying with capistrano, which precompiles my assets on my production server.
Problem: I'm trying to add a font and use it with #font-face. It works locally, but not in production.
Error message: "Failed to load resource: the server responded with a status of 404 (Not Found) "
My fonts are located in app/assets/fonts/
My relevant files:
app/assets/stylesheets/application.css.scss:
/*
* This is a manifest file yada yada yada...
*
*= require bootstrap
*= require_self
*= require_tree .
*/
#font-face {
font-family: 'stone_sansregular';
src: url(font-path('stone_sans_regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
url(font-path('stone_sans_regular-webfont.woff')) format('woff'),
url(font-path('stone_sans_regular-webfont.ttf')) format('truetype'),
url(font-path('stone_sans_regular-webfont.svg') + "#stone_sansregular") format('svg');
}
config/application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
I have looked for answers in several SO posts and other sources but I can't seem to get it right. Btw, I am not deploying on Heroku. What am I missing? I appreciate your help.
EDIT: In production, I find the fonts where I assume they should be: my-rails-app/current/public/#assets/fonts
I just recently fixed a similar issue once I realized my font-awesome.css file was not actually getting loaded in production. I had to do
*= require font-awesome.css
instead of
#import "font-awsome.css";
in my application.css.scss manifest.
Also, as for the MD5 hash that gets added on to file names, I'm not sure if that is an issue or not, but I ended up doing:
font-url('fontawesome-webfont.eot');
rather than
url(font-path('fontawesome-webfont.eot')
So if that was even an issue, I'm fairly certain using font-url will handle it properly.
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>