Skip to content

Instantly share code, notes, and snippets.

@lajunta
Created October 29, 2013 06:08
Show Gist options
  • Save lajunta/7209817 to your computer and use it in GitHub Desktop.
Save lajunta/7209817 to your computer and use it in GitHub Desktop.
Place your new font in the folder app/assets/fonts.
Tell the server where the fonts are located and that it has to precompile assets with those specific file extensions. You probably only have to add the following lines to your config/environments/production.rb file since you are not precompiling your assets locally. If you are, then also add these lines to your config/environments/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 )
Declare your font in your css like so:
@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 that the font is named exactly like in the url portion of the declaration. Capital letters make a difference. So in this case the font should have the name icomoon.
If you are using Sass or Less with Rails 3.1 or later (so your css file has the .scss or .less extension), then change the url(...) in the font declaration to font-url(...).
If you are not, then your css file should have the extension .css.erb and the font declaration should be like this url('<%= asset_path(...) %>').
Finally, use your font in your css like you declared it in the font-family part. Since it was declared capitalized, you can use it like this:
font-family: 'Icomoon';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment