In my Rails 5 app, I have this in my application.sass file...
/*
*= require bootstrap-sass-official
...
*/
#font-face
font-family: 'Glyphicons Halflings'
src: url('/assets/glyphicons-halflings-regular.eot')
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')
...as per the advice in Ruby on Rails Bootstrap Glyphicons not working. I get this error in my Chrome console: Failed to decode downloaded font: http://localhost:3000/assets/glyphicons-halflings-regular.woff, etc.. for the various font formats.
Do I need to put anything into my Rails assets fonts folder? If so, what specifically? Thanks so much for any help on this.
As the application is Rails 5, better way - place your fonts in the folder app/assets/fonts.
If you want to place them outside fonts folder, you'll need to add the following configuration:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
And then can use urls as your mentioned
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?iefix') format('eot'),
url('/assets/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Rails 3.2.3, sass.
I have placed the ttf, woff, eot, svg files in vendor/fonts folder.
I have also added this to application.rb :
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/fonts"
config.assets.precompile += %w( .svg .eot .woff .ttf )
I've created a file called fonts.css.scss in the vendor/stylesheets folder with the following code :
#font-face {
font-family: 'museosans100';
src: font-url('/assets/museosans100.eot');
src: font-url('/assets/museosans100.eot?#iefix') format('embedded-opentype'),
font-url('/assets/museosans100.woff') format('woff'),
font-url('/assets/museosans100.ttf') format('truetype'),
font-url('/assets/museosans100.svg#museosans100') format('svg');
font-weight: normal;
font-style: normal;
}
Then, I've used font-family : 'museosans100'; in the CSS bits.
The fonts still don't change. I've tried doing the same thing with the app/assets folder as well, but no use. What could I be missing? (I've tried restarting the server too.)
Here is the modified code :
#font-face {
font-family: 'museosans100';
src: font-url('museosans100.eot');
src: font-url('museosans100.eot?#iefix') format('embedded-opentype'),
font-url('museosans100.woff') format('woff'),
font-url('museosans100.ttf') format('truetype'),
font-url('museosans100.svg#museosans100') format('svg');
font-weight: normal;
font-style: normal;
}
Using Rails 4
I have read lots of threads on how to get my custom fonts working in heroku. They work locally in dev mode but when pushed to heroku they dont show up.
my #font-face located in master stylesheet
#font-face {
font-family: 'caviar_dreamsregular';
src: font-url('caviardreams-webfont.eot');
src: font-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
font-url('caviardreams-webfont.woff') format('woff'),
font-url('caviardreams-webfont.ttf') format('truetype'),
font-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
Application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
I have precompiled assets with
rake assets:precompile
No errors in Heroku logs.
Cant figure this out, does anyone have any suggestions?
UPDATE:
Visited the site on my phone and the font works... Cleared cache on computer, still not working on computer.
This could be down to several issues; most notably, I would recommend you're not using dynamic asset paths:
Fingerprinting
Rails uses asset fingerprinting when you precompile assets
The reason for this is to allow each asset to be individually allocated to the system, thus providing a more robust structure (or something). Basically, it adds an MD5 hash to the end of your asset filenames:
global-908e25f4bf641868d8683022a5b62f54.css
Paths
Because dynamic fingerprinting makes all precompiled assets have different names, you need to use Rails' dynamic path helpers:
#app/assets/stylesheets/application.css.scss
#font-face {
font-family: 'caviar_dreamsregular';
src: asset-url('caviardreams-webfont.eot');
src: asset-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
asset-url('caviardreams-webfont.woff') format('woff'),
asset-url('caviardreams-webfont.ttf') format('truetype'),
asset-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
You'll need to use a dynamic stylesheet engine such as SASS to handle the dynamic paths
Placed fonts in app/assets/fonts
Added
Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
in production.rb and development.rb
Fonts linked in css like:
#font-face {
font-family: 'Icomoon';
src:url('/assets/icomoon.eot');
src:url('/assets/icomoon.eot?#iefix') format('embedded-opentype'),
url('/assets/icomoon.svg#icomoon') format('svg'),
url('/assets/icomoon.woff') format('woff'),
url('/assets/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Seems to work in development. But in HEROKU is does not seem to work. It cannot find /assets/icomoon.eot .
The solution in this link does not seem to work
Using fonts with Rails asset pipeline
Assets like fonts will work on development but not production if you are using regular old css to locate your assets rather than the asset pipeline helpers. Rails 4 added breaking changes to the asset pipeline to encourage people to use it properly, and not use the old css method of referencing assets.
To resolve this, you need to use the new asset pipeline helpers to point to the fingerprinted, cached versions of your fonts. Rather than url (which does not use the asset pipeline), you need to use font-url (which does use it). To do this, you may have to use Sass or embed ERB in your stylesheet.
Example (using SCSS):
#font-face {
font-family: 'Icomoon';
src: font-url("/assets/icomoon.eot");
src: font-url("/assets/icomoon.eot?#iefix") format("embedded-opentype"), font-url("/assets/icomoon.svg#icomoon") format("svg"), font-url("/assets/icomoon.woff") format("woff"), font-url("/assets/icomoon.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
See here: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
In light of the comments received on this answer (and the unnecessary downvotes) I've amended my answer as follows:
It seems Rails has now created a way to handle fonts in the assets folder. It's called font-path and works like this:
If you add a custom font to your /assets/fonts folder, you can use the
font-path helper to access the files within. This can then be used
in your stylesheets & other assets using the font-path helper:
|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/
#font-face {
font-family:'icofonts';
src:font-url('icofonts.eot');
src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),
...
}
This works for precompiled assets (which Heroku does anyway), and static assets. If you want the pre-Rails 4 way of achieving this, please refer to my answer below:
We've got fonts working on Heroku here: http://firststop.herokuapp.com (it's in demo still)
Here is our CSS for it:
#assets/application.css
/*-- Akagi Font --*/
#font-face {
font-family: 'akagi';
src: url('fonts/akagi-th-webfont.eot'),
src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/akagi-th-webfont.woff') format('woff'),
url('fonts/akagi-th-webfont.ttf') format('truetype'),
url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'akagi';
src: url('fonts/akagi-bk-webfont.eot');
src: url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/akagi-bk-webfont.woff') format('woff'),
url('fonts/akagi-bk-webfont.ttf') format('truetype'),
url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'akagi';
src: url('fonts/akagi-sb-webfont.eot');
src: url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/akagi-sb-webfont.woff') format('woff'),
url('fonts/akagi-sb-webfont.ttf') format('truetype'),
url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');
font-weight: 500;
font-style: normal;
}
We put our fonts into the /stylesheets/fonts folder
We just do the standard precompile fonts stuff to get all CSS working on Heroku, and it works. I suspect your paths are not correct. Maybe try moving your fonts directory into your /assets/stylesheets folder :)
Actually, I just tried the solution proposed in this comment, and it worked perfectly. Seems you only have to change the regex for the precompile instruction in order for Heroku to correctly find the asset.
i.e. change config.assets.precompile += %w( .svg .eot .woff .ttf ) to config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/.
Edit: It might also be necessary to add RAILS_ENV=production when you run the assets:precompile rake task, as per Heroku's docs.
Rails 4
# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w(.svg .eot .woff .ttf)
# app/assets/stylesheets/foundation-icons.css.scss
#font-face {
font-family: "foundation-icons";
src: asset-url("foundation-icons.eot");
src: asset-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
asset-url("foundation-icons.woff") format("woff"),
asset-url("foundation-icons.ttf") format("truetype"),
asset-url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
Try removing /assets/ from all of your font paths.
#font-face {
font-family: 'Icomoon';
src:url('icomoon.eot');
src:url('icomoon.eot?#iefix') format('embedded-opentype'),
url('icomoon.svg#icomoon') format('svg'),
url('icomoon.woff') format('woff'),
url('icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Also try removing scaffolds.css if it's in assets/stylesheets.
I solved the problem by using a combination of all the answers and comments. My example uses the Foundation Icon Fonts.
In your application.rb file add the following:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
Rename your application.css file to application.css.scss and use the font-url and asset-path directives:
#font-face {
font-family: "foundation-icons";
src: font-url( asset-path("foundation-icons.eot") );
src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
font-url( asset-path("foundation-icons.woff") ) format("woff"),
font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
font-weight: normal;
font-style: normal;
}
You don't actually have to change the precompile regex or asset path.
Try to run rake assets:precompile in production mode before committing to Heroku.
rake assets:precompile RAILS_ENV=production
and make sure to reference your assets in css files using asset_path helper method.
like:
src: font-url('<%= asset_path("foundation-icons.eot")%>');
You don't need to include the /assets/fonts/ directory in config.assets.paths. According to documentation all directories included in app/assets, lib/assets or vendor/assets are automatically loaded.
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Pipeline assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
[...]
Besides the standard assets/* paths, additional (fully qualified) paths can be added to the pipeline in config/application.rb.
config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")
Try to run Rails.application.class.config.assets.paths in console and you'll see an array of all directories inside /assets. if you add another directory and restart the console it will be automatically included inside the array and the content will be served as assets.
You don't even need config.assets.precompile += %w( .svg .eot .woff .ttf ) because all non-js-css files are already included through the default matcher Proc.
http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (this will include all image assets automatically):
[ Proc.new { |path| !%w(.js .css).include?(File.extname(path)) }, /application.(css|js)$/ ]
Try to only add the fonts directory in app/assets/ leaving all config as default and deploy your app on heroku.
Rename your .css file to .css.erb
Replace all the url('/assets/icomoon.eot') with url(<%= asset_path 'icomoon.eot' %>), etc.
You can achieve the same result by converting your css file to SASS/SCSS and using font-url() helper instead of url().
I've tried that with Rails 4 and it works even without the bits you've added to production.rb/application.rb.
After trying all the methods above, none worked for me but this is how I fixed my font problem. If the fonts work in development mode then simply do
config.assets.compile = true
in
config\environments\production.rb
There are two ways to solve this issue.
You can directly put your font files in public directory and add the path e.g /fonts/font-name in the CSS file
Add the line Rails.application.config.assets.compile = true in config/initializers/assets.rb file
I am working with a font file, of which looks like this:
#font-face {
font-family: 'FontAwesome';
src: url(asset-path('fontawesome-webfont.eot', font));
src: url(asset-path('fontawesome-webfont.eot', font)) format('embedded-opentype'),
url(asset-path('fontawesome-webfont.woff', font)) format('woff'),
url(asset-path('fontawesome-webfont.ttf', font)) format('truetype'),
url(asset-path('fontawesome-webfont.svg', font)) format('svg');
// src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
I was under the impression that this syntax: url(asset-url('...'), font)); from a SCSS file should render /assets/font.oet, for instance, in the CSS file that is gets compressed to.
That is not what is happening. It doesn't change at all. I still see url(asset-url('...'), font)); in the CSS file.
My Setup:
I have all my SCSS files housed under app/assets/stylesheets. I pull all the SCSS files into Application.css.scss via #import tags. (Could this be a reason why asset-path will not parse?).
*I need something that will render the asset pipeline MD5 fingerprint when I run RAILS_ENV=production bundle exec rake assets:precompile, so if asset-url will NOT render the fingerprint, can you please point me to a helper that will *
Appreciate the help.
How about using font-path instead of asset-path and drop ", font" at the end.
#font-face {
font-family: 'FontAwesome';
src: url(font-path('fontawesome-webfont.eot');
src: url(font-path('fontawesome-webfont.eot')) format('embedded-opentype'),
url(font-path('fontawesome-webfont.woff')) format('woff'),
url(font-path('fontawesome-webfont.ttf')) format('truetype'),
url(font-path('fontawesome-webfont.svg')) format('svg');
// src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
It will be translated into e.g.
src:url("/assets/fontawesome-webfont-0a491f75efc766a9fe9daaa5f407aec1.eot");
...
For more info., somebody has asked similar question here.
Using font-url instead of font-path like this works like a charm for me:
#font-face {
font-family: 'FontAwesome';
src: font-url('fontawesome-webfont.eot');
src: font-url('fontawesome-webfont.eot') format('embedded-opentype'), font-url('fontawesome-webfont.woff') format('woff'), font-url('fontawesome-webfont.ttf') format('truetype'), font-url('fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}