I have some fonts being configured in my Scss file like so:
#font-face {
font-family: 'Icomoon';
src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
asset-url('icoMoon.woff', font) format('woff'),
asset-url('icoMoon.ttf', font) format('truetype'),
asset-url('icoMoon.svg#Icomoon', font) format('svg');
}
The actual font file are stored in /app/assets/fonts/
I have added config.assets.paths << Rails.root.join("app", "assets", "fonts") to my application.rb file
and the compile CSS source is as follows:
#font-face {
font-family: 'Icomoon';
src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}
But when I run the app the font files are not being found. The logs:
Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100
Served asset /icoMoon.ttf - 404 Not Found (13ms)
Why isn't the asset pipeline flattening the font files down into just /assets?
Any ideas people?
Kind regards,
Neil
Extra info:
When checking the rails console for assets paths and assetprecompile I get the following:
1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil
1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320#neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320#neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320#neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
path: /Users/neiltonge/code/neiltonge/app/assets/fonts
=> nil
If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders:
app/assets/fonts
lib/assets/fonts
vendor/assets/fonts
For Rails versions > 4, you must place your fonts in the app/assets/fonts folder.
Note: To place fonts outside of these designated folders, use the following configuration:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
For Rails versions > 4.2, it is recommended to add this configuration to config/initializers/assets.rb.
However, you can also add it to either config/application.rb , or to config/production.rb
Declare your font in your CSS file:
#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;
}
Make sure your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon.
If you are using Sass or Less with Rails > 3.1.0 (your CSS file has .scss or .less extension), then change the url(...) in the font declaration to font-url(...).
Otherwise, your CSS file should have the extension .css.erb, and the font declaration should be url('<%= asset_path(...) %>').
If you are using Rails > 3.2.1, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it's more clear.
Finally, use your font in your CSS like you declared it in the font-family part. If it was declared capitalized, you can use it like this:
font-family: 'Icomoon';
Now here's a twist:
You should place all fonts in app/assets/fonts/ as they WILL get precompiled in staging and production by default—they will get precompiled when pushed to heroku.
Font files placed in vendor/assets will NOT be precompiled on staging or production by default — they will fail on heroku. Source!
— #plapier, thoughtbot/bourbon
I strongly believe that putting vendor fonts into vendor/assets/fonts
makes a lot more sense than putting them into app/assets/fonts. With
these 2 lines of extra configuration this has worked well for me (on
Rails 4):
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
— #jhilden, thoughtbot/bourbon
I've also tested it on rails 4.0.0. Actually the last one line is enough to safely precompile fonts from vendor folder. Took a couple of hours to figure it out. Hope it helped someone.
If you don't want to keep track of moving your fonts around:
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ /\.(eot|svg|ttf|woff)\z/
true
end
}
You need to use font-url in your #font-face block, not url
#font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
as well as this line in application.rb, as you mentioned (for fonts in app/assets/fonts
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Here my approach to using fonts in asset pipeline:
1) Put all your font file under app/assets/fonts/, actually you are not restricted to put it under fonts folder name. You can put any subfolder name you like. E.g. app/assets/abc or app/assets/anotherfonts. But i highly recommend you put it under app/assets/fonts/ for better folder structure.
2) From your sass file, using the sass helper font-path to request your font assets like this
#font-face {
font-family: 'FontAwesome';
src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
3) Run bundle exec rake assets:precompile from your local machine and see your application.css result. You should see something like this:
#font-face {
font-family: 'FontAwesome';
src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
If you want to know more how asset pipeline work, you can visit the following simple guide:
https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2
Here is a repo the demonstrates serving a custom font with Rails 5.2 that works on Heroku. It goes further and optimizes serving the fonts to be as fast as possible according to https://www.webpagetest.org/
https://github.com/nzoschke/edgecors
To start I picked pieces from answers above. For Rails 5.2+ you shouldn't need extra asset pipeline config.
Asset Pipeline and SCSS
Place fonts in app/assets/fonts
Place the #font-face declaration in an scss file and use the font-url helper
From app/assets/stylesheets/welcome.scss:
#font-face {
font-family: 'Inconsolata';
src: font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Inconsolata";
font-weight: bold;
}
Serve from CDN with CORS
I'm using CloudFront, added with the Heroku Edge addon.
First configure a CDN prefix and default Cache-Control headers in production.rb:
Rails.application.configure do
# e.g. https://d1unsc88mkka3m.cloudfront.net
config.action_controller.asset_host = ENV["EDGE_URL"]
config.public_file_server.headers = {
'Cache-Control' => 'public, max-age=31536000'
}
end
If you try to access the font from the herokuapp.com URL to the CDN URL, you will get a CORS error in your browser:
Access to font at 'https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf' from origin 'https://edgecors.herokuapp.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. edgecors.herokuapp.com/
GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net::ERR_FAILED
So configure CORS to allow access to the font from Heroku to the CDN URL:
module EdgeCors
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 5.2
config.middleware.insert_after ActionDispatch::Static, Rack::Deflater
config.middleware.insert_before 0, Rack::Cors do
allow do
origins %w[
http://edgecors.herokuapp.com
https://edgecors.herokuapp.com
]
resource "*", headers: :any, methods: [:get, :post, :options]
end
end
end
end
Serve gzip Font Asset
The asset pipeline builds a .ttf.gz file but doesn't serve it. This monkey patch changes the asset pipeline gzip whitelist to a blacklist:
require 'action_dispatch/middleware/static'
ActionDispatch::FileHandler.class_eval do
private
def gzip_file_path(path)
return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
gzip_path = "#{path}.gz"
if File.exist?(File.join(#root, ::Rack::Utils.unescape_path(gzip_path)))
gzip_path
else
false
end
end
end
The ultimate result is a custom font file in app/assets/fonts served from a long-lived CloudFront cache.
I was having this problem on Rails 4.2 (with ruby 2.2.3) and had to edit the font-awesome _paths.scss partial to remove references to $fa-font-path and removing a leading forward slash. The following was broken:
#font-face {
font-family: 'FontAwesome';
src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
And the following works:
#font-face {
font-family: 'FontAwesome';
src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
An alternative would be to simply remove the forward slash following the interpolated $fa-font-path and then define $fa-font-path as an empty string or subdirectory with trailing forward slash (as needed).
Remember to recompile assets and restart your server as needed. For example, on a passenger setup:
prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart
Then reload your browser.
I'm using Rails 4.2, and could not get the footable icons to show up. Little boxes were showing, instead of the (+) on collapsed rows and the little sorting arrows I expected. After studying the information here, I made one simple change to my code: remove the font directory in css. That is, change all the css entries like this:
src:url('fonts/footable.eot');
to look like this:
src:url('footable.eot');
It worked. I think Rails 4.2 already assumes the font directory, so specifying it again in the css code makes the font files not get found. Hope this helps.
I had a similar issue when I upgraded my Rails 3 app to Rails 4 recently. My fonts were not working properly as in the Rails 4+, we are only allowed to keep the fonts under app/assets/fonts directory. But my Rails 3 app had a different font organization. So I had to configure the app so that it still works with Rails 4+ having my fonts in a different place other than app/assets/fonts. I have tried several solutions but after I found non-stupid-digest-assets gem, it just made it so easy.
Add this gem by adding the following line to your Gemfile:
gem 'non-stupid-digest-assets'
Then run:
bundle install
And finally add the following line in your config/initializers/non_digest_assets.rb file:
NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]
That's it. This solved my problem nicely. Hope this helps someone who have encountered similar problem like me.
In my case the original question was using asset-url without results instead of plain url css property. Using asset-url ended up working for me in Heroku. Plus setting the fonts in /assets/fonts folder and calling asset-url('font.eot') without adding any subfolder or any other configuration to it.
If you have a file called scaffolds.css.scss, then there's a chance that's overriding all the custom things you're doing in the other files. I commented out that file and suddenly everything worked. If there isn't anything important in that file, you might as well just delete it!
Put your font files (woff, woff2, eot, ttf, ...) in /app/assets/fonts directory.
Then add following to your config/initializers/assets.rb :
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/
In above answers woff2 was not included (and for future ref, you might need to add other extensions by just adding a |{font-file-extension} here)
Using the font in you css file:
Important you need to rename it from stylesheet.css into stylesheet.css.scss (this for the font-url to do its work and transform the url of the font in production correctly after asset precompile):
#font-face {
font-family: 'MyFont'
src: font-url('myfont.woff') format('woff');
}
body{
font-family: 'MyFont'
}
And then run:
rails assets:precompile
After running assets precompile your font file is copied from app/assets/fonts/myfont.woff into the public/assets/myfont-{SOME_DIGEST_KEY}.woff location. And now the above css just works also in production much like image assets.
You can also see that after the precompile assets command an application-{somedigest}.css is created and inside you will see
the #font-face but there our font-url('myfont.woff') will be transformed into url(/assets/myfont.woff-{SOME_DIGEST_KEY}.woff) now and the digest matches the one that the file was moved to. That way updating your font files also bust the browser cache properly etc.
Make sure your nginx is also serving the public/assets folder for better performance. This was tested with rails 5 and rails 6 in production. It should also work with rails 4 most likely.
just place your fonts inside app/assets/fonts folder and set the autoload path when app start using writing the code in application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
and
then use the following code in css.
#font-face {
font-family: 'icomoon';
src: asset-url('icomoon.eot');
src: asset-url('icomoon.eot') format('embedded-opentype'),
asset-url('icomoon.woff') format('woff'),
asset-url('icomoon.ttf') format('truetype'),
asset-url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Give it a try.
Thanks
Related
I am new to rails. I am trying to figure out how to include custom folder path since i m using bootstrap and its tries to load some fonts from specific path which is "/assets/themes/default/assets/fonts/icons.woff2" hence i have created the folder themes inside assest folder, inside themes folder i have created default folder .. so on till fonts folder and i have kept icons.woff2 inside fonts folder. how can i include this path into my project i m still getting resource not found exception
GET http://localhost:3000/assets/themes/default/assets/fonts/icons.ttf 404 (Not Found)
For bootstrap you can include the folder fonts into your assets and for rails 4+ you can just use the font-url helper . A standard that should work for the glyphicons is
#at-root {
// Import the fonts
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('bootstrap/glyphicons-halflings-regular.eot');
src: font-url('bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), font-url('bootstrap/glyphicons-halflings-regular.woff2') format('woff2'), font-url('bootstrap/glyphicons-halflings-regular.woff') format('woff'), font-url('bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), font-url('bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
}
Works with current bootstrap and rails 4+
the font-url helper points automatically to app/assets/fonts
I feel like I tried all solutions I found here and on some blogs but something is still wrong and I have no idea what.
My error:
...
Started GET "/fonts/amaze.ttf" for 83.9.18.180 at 2014-11-26 09:10:21 +0000
...
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/amaze.ttf"):
...
Of course on localhost it isn't working either.
I am using rails 4.1.1
My font is located in:
assets/fonts/amaze.ttf
I even relocated it to check if it would work: assets/amaze.ttf -it wasn't.
My current solution in application.css.scss file:
#font-face {
font-family: 'Amaze';
src: font-url('amaze.ttf');
}
.amaze {
font-family: 'Amaze';
}
I tried some configuration in application.rb but had no effect:
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Do I even have to configure anything in application or development/production files?
EDIT
(kind of) FIXED a PROBLEM
The problem was that I had a broken font...
more details:
I had font from here http://fontzone.net/download/amaze-normal
and it was broken (I mean not exactly broken, it worked on linux, but not with font-face, no idea why, if it's worth anyone's efforts give it a try to figure out what was the issue)
I tried another font from another source:
http://www.fontcubes.com/Amaze.font
and it worked! yey! -
EDIT
I had similar issue with more fonts (both otf and ttf) so I would say problem is still open ;p
Utilize the Asset Pipeline or move your fonts to the public directory.
Your problem here is that the path /fonts/amaze.ttf is not hitting the Rails Asset Pipeline. It would need to be prefaced with /assets in order to use the Asset Pipeline, like /assets/fonts/amaze.ttf or /assets/amaze.ttf.
You have two main options here:
Update the path request:
So use /assets/amaze.ttf instead of /fonts/amaze.ttf.
Be aware that in order for the path /assets/fonts/amaze.ttf to work you would need to put the amaze.ttf font in /app/assets/fonts/fonts/ or /vendor/assets/fonts/fonts/. The double fonts directory ensures there is a fonts directory in /public/assets after the assets are compiled. See this answer for more info.
Move your fonts directory to your public directory:
Since the requested path doesn't utilize the Asset Pipeline anyway, you can simply move your fonts directory to the /public/ directory and the web server will automatically serve it. So your font(s) should be located at /public/fonts/amaze.ttf, etc.
That should do it!
I have also face this problem with font-awesome but it is my general research for fonts.
I create a new directory under app/assets , named fonts. Then copy all the Fonts there and include it to the assets in application.rb file , like this :
config.assets.paths << Rails.root.join("app", "assets", "fonts")
rename your font-awesome.css to font-awesome.css.scss.erb and change the #font-face declaration in it like this
#font-face { font-family: "FontAwesome"; src: url('<%= asset_path('fontawesome-webfont.eot')%>');
src: url('<%= asset_path('fontawesome-webfont.eot?#iefix')%>') format('eot'),
url('<%= asset_path('fontawesome-webfont.woff')%>') format('woff'),
url('<%= asset_path('fontawesome-webfont.ttf')%>') format('truetype'),
url('<%= asset_path('fontawesome-webfont.svg#FontAwesome')%>') format('svg');
font-weight: normal; font-style: normal; }
Hope this will helpful :)
There are more ref Font-face
For me it was a file permission error, I had copied the files from another computer. once I fixed the permissions, it worked.
For me, it was as simple as my import in application.scss used https// instead of https:// for the URL. Gotta read closely next time.
Thanks guys.
I found a solution, why not put fonts/*.ttf into app/assets/images/fonts/*.ttf for dev env?
At the same time keep config/environments/development.rb still the default config.serve_static_assets = false false value.
This works for me.
For some reason my glyphicons are not displaying. When I look at the files in the inspector, they show up red, because they are byte 0. However I can access the links successfully:
http://admin.packagezen.com/assets/glyphicons-halflings-regular.woff
Any idea, what is happening? Is it heroku perhaps? or rails? I put the fonts in /public/assets and the file exists when i ssh into the server.
You can configure the rails assets pipeline to serve this for your. Do the following:
Drop that font in (not in public/assets):
/assets/fonts/glyphicons-halflings-regular.woff
Add the font face in your application.css that uses this font/url, this will reference the finger-printed version of this:
#font-face {
font-family: 'Glyphicons';
src: font-url("/assets/fonts/glyphicons-halflings-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Then feel free to use that name anywhere to reference that font. Try it out.
Did you add to the config/application.rb file the following (within class Application < Rails::Application)?
config.assets.paths << "#{Rails}/vendor/assets/fonts"
E.g. source: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
Currently I trying to add custom fonts into my Rails 4 application.
I added all of my fonts into assets/fonts
I added config.assets.paths << Rails.root.join("app", "assets", "fonts") into config/application.rb
I added script into my style.css
#font-face {
font-family: 'oxygenregular';
src: url(font-path('oxygen-regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
url(font-path('oxygen-regular-webfont.woff')) format('woff'),
url(font-path('oxygen-regular-webfont.ttf')) format('truetype'),
url(font-path('oxygen-regular-webfont.svg') + "#MyFont") format('svg');
}
body {
font-family: 'oxygenregular', arial;
background: #f4f5f9;
background-image: url(../images/bg-pattern.png);
background-position: 0 bottom;
background-repeat: no-repeat;
}
I don't get any error like 404 (Not Found), since I got the error before modified config/application.rb
But the application doesn't load the font that I already put. I tried on native HTML and the fonts are working well, but when I trying to put them into Rails application, it doesn't load.a
Fonts
The problem you have is you're calling the font files without referencing their paths correctly.
The issue here is the same as when you reference images or other files from the asset pipeline - if you use a file path which doesn't exist, it's just not going to load (because of the asset fingerprinting):
Fingerprinting is a technique that makes the name of a file dependent
on the contents of the file. When the file contents change, the
filename is also changed. For content that is static or infrequently
changed, this provides an easy way to tell whether two versions of a
file are identical, even across different servers or deployment dates.
What you get with many Rails assets is an inability to reference the correct file, as the filepath has had its name changed when you precompiled them, preventing them from loading in most cases.
Paths
To add to #praszyk's answer is that you'll need to use one of the asset_paths to pull the correct font path, which can be done using one of the CSS preprocessors that come with Rails (typically SCSS or SASS)
The problem you have is using .css is not going to do this - you have to use either .scss or .sass:
#app/assets/stylesheets/style.css.scss
#font-face { font-family: 'oxygenregular';
src: asset_url('/fonts/oxygen-regular-webfont.eot' + "?#iefix")
format('embedded-opentype'),
asset_url('/fonts/oxygen-regular-webfont.woff') format('woff'),
asset_url('/fonts/oxygen-regular-webfont.ttf') format('truetype'),
asset_url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }
Using asset_url with scss will automatically call the correct version of the file - fingerprinted or not.
If you use this with #praszyk's answer, it should hopefully work
Change:
#font-face { font-family: 'oxygenregular';
src: url(font-path('/fonts/oxygen-regular-webfont.eot') + "?#iefix")
format('embedded-opentype'),
url(font-path('/fonts/oxygen-regular-webfont.woff')) format('woff'),
url(font-path('/fonts/oxygen-regular-webfont.ttf')) format('truetype'),
url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }
body { font-family: 'oxygenregular', ...}
Since you're loading the fonts in "style.css" which resides in /assets/stylesheets (and /stylesheets/ in the browser) the script tries to load /stylesheets/oxygen-regular-webfont.eot.
Appending "/fonts/" to your paths should work as expected.
Also check the developer console of your browser if you're still having errors.
In CSS:
#font-face {
font-family: 'some_name';
src: url('font_name.eot');
}
In application.rb:
config.assets.paths << "#{Rails.root}/app/assets/fonts"
On Heroku this setup works well, but on localhost doesn't. Am I missing something for correct displaying non-standard fonts on localhost?
I am running on Mountain Lion.
Thanks
The scr path specification of the font is relative.
In production environment, all assets are compiled and assets of different types are placed in one folder, accessible at /assets/asset-name. Which means both font and css file will be in same folder, and relative path would do. In development environment, however, assets ain't compiled and ain't combined together, meaning they're accessed at /assets/ASSET-TYPE/asset-name. So the font won't be in the same folder as the stylesheet will, and relative path won't help to find the actual font file.
Rails has an asset-url CSS helper, which works in both envs, it'll be replaced during compilation to the url(path-to-asset).
#font-face {
font-family: 'The Font';
src: asset-url('the_font.eof', font);
}
This solution works for me:
#font-face {
font-family: 'some_name';
src: url('/assets/font_name.eot');
}