I'm trying to use a particular font in a Rails 4.2.4 app and nothing is working--it stubbornly refuses to show up. I've spent a few hours on it, and I don't know what I'm doing wrong.
The font is located at
app/assets/fonts/comic_andy.tff
app/assets/stylesheets/sass/application.css.scss
@font-face {
font-family: "comic_andy";
src: font-url('comic_andy.ttf');
src: font-url('comic_andy.ttf'), format('truetype');
}
@font-face {
font-family: "comic_andy";
src: url(/fonts/comic_andy.ttf);
src: url(/fonts/comic_andy.ttf), format("truetype");
}
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
application.rb
asset-url
font-url
url
rake assets:clobber
If you put your resources into app/assets
, you're all set, as mentioned here.
The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special - any path under assets/* will be searched.
asset-url
or font-url
If you refer to The Asset Pipeline page on Ruby on Rails guides, you'll see the adequate method here is to use asset-url
(or font-url
) as in:
@font-face {
font-family: 'comic_andy';
src: asset-url('comic_andy.ttf') format('truetype');
}
On your development environment, it should compile as:
@font-face {
font-family: 'comic_andy';
src: url(/assets/comic_andy.ttf) format("truetype");
}
NB: the proper format for .ttf files is format("truetype")
.
If things still don't work, maybe there's a problem with your ttf file (my project is using the woff
format) and you should maybe use a service such as Font Squirrel Webfont generator to fix it.