@ font-face in rails 4.0 with sass url not found for custom fonts

Question

Hi everyone in my rails project, I am trying to use custom fonts, in addition there are many answers related to this question, I followed this answer which does not help edit development.rb file

 # Add the fonts path config.assets.paths << Rails.root.join('app', 'assets', 'fonts') # Precompile additional assets config.assets.precompile += %w( .svg .eot .woff .ttf ) 

while it shows No route matches [GET] "/assets/chalkduster-webfont.woff"

and I set url as

 @font-face { font-family: 'chalkdusterregular'; src: url('chalkduster-webfont.eot'); src:url('chalkduster-webfont.svg#chalkdusterregular') format('svg'), url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'), url('chalkduster-webfont.woff') format('woff'), url('chalkduster-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

more than trying font_path('') inside the source, and also font-url() it never works ..: (

Answer 1

Try asset-url() . It works for me.

 @font-face { font-family: 'chalkdusterregular'; src: asset-url('chalkduster-webfont.eot'); src: asset-url('chalkduster-webfont.svg#chalkdusterregular') format('svg'), asset-url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'), asset-url('chalkduster-webfont.woff') format('woff'), asset-url('chalkduster-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

In addition, I add only the font path and precompilation of additional resources in config / environment / production.rb

 # Add the fonts path config.assets.paths << Rails.root.join('app', 'assets', 'fonts') # Precompile additional assets config.assets.precompile += %w( .svg .eot .woff .ttf ) 

No need to add to config / environment / development.rb as asset-url works a bit magical.

Answer 2

I found an alternative that is more convenient for implementing unnecessary imports, and this: You can convert the font file to a base 64 text file. Make sure you check the Base64 encode selection

then click convert and download the zip file that the page generates. Inside the .zip file, open the .css file and you will see the code you need.

---

I am trying to implement a jverban solution, but for me it does not work.

Then I found one where I explain two ways to do this, click to open a tattoo

and I will try the second solution (hacker method). and the only thing to do is move the font folder inside the app / assets / stylesheets table. (I want you to put all the fonts inside a folder called fonts)

then in the css o scss file you can do this with this code.

 @font-face { font-family: 'GoodDDC'; src: url(asset_path("fonts/GOODDC.ttf")); } 

link to path_resource on rails in the app/assets/stylesheets folder

tree folder looks like

 app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)