Question

how to emebed a font using @font-face on rails:

my fonts are located in:

/vendor/assets/stylesheets/fonts/custom-font-lists-here.eot

my stylesheet that contain a @font-face is inside:

/vendor/assets/stylesheets/fonts.css

I am using this right now

@font-face {
    font-family: 'ArimoRegular';
    src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>');
    src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>'+'?#iefix') format('embedded-opentype'),
         url('<%= asset_path('fonts/arimo-regular-webfont.woff') %>') format('woff'),
         url('<%= asset_path('fonts/arimo-regular-webfont.ttf') %>') format('truetype'),
         url('<%= asset_path('fonts/arimo-regular-webfont.svg') %>#ArimoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

I wonder if this is right,

Any suggestion are welcome,
Thank you

Answer 1

You shouldn’t need the fonts/ portion of the file path. The app/assets/fonts directory should already be included in asset_path, so you should be able to use this:

<%= asset_path('arimo-regular-webfont.eot') %>

I don’t know why this happens, but I’ve heard of people having issues with the assets/fonts directory not being in the asset pipeline so you have to add it manually. If the above doesn’t work for you, try added the directory manually by putting the following in config/application.rb:

config.assets.paths << "#{Rails.root}/app/assets/fonts"