@font-face in Rails 4.0 with Sass URL not found fo

Question

In my Rails project I am trying to use custom fonts. There are lots of answers related to this question, like this answer which didn't help, I edited development.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 )

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

I set me url like:

@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;

}

I tried font_path('') within source and also font-url() it never works. :(

Answer 1

Try asset-url(). 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;
}

Also, I only add the fonts path and precompile additional assets in config/environments/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 )

Doesn't need to be added to config/environments/development.rb as asset-url works a little magic.

Answer 2

I found an alternative more easy to implement not required imports and this is: You can convert your font file on a base 64 text. Make sure you check the choice Base64 encode

then click on convert and download the .zip file that generate the page. Inside the .zip file open de .css and you see the code you need.

---

i try to implement the solution of the jverban but for me, doesn't works.

Then i found a tuto, where explain two ways todo it, click for open the tuto

and i try the second solution (The way of the hacker). and the only to do is move the fonts folder inside the app/assets/stylesheets. (i supuose you put all of you fonts inside a folder named fonts)

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

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

asset_path reference on rails the folder app/assets/stylesheets

the tree folder look like

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