0

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.

SCSS (located at 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'); 
}

In the browser, the SCSS compiles to this CSS: 

@font-face {
font-family: "comic_andy";
src: url(/fonts/comic_andy.ttf);
src: url(/fonts/comic_andy.ttf), format("truetype");
}

Isn't it supposed to be compiling to assets/comic_andy.ttf? I'm newer to Rails and although I get what the asset pipeline is, it's still proving tricky to wrap my head around enough to use very efficiently.

I've read through Rails 4 - Custom Fonts, How to use fonts in Rails 4 and several other Stack Overflow questions related to fonts/Rails/the asset pipeline, and tried many of the suggestions, including (but not limited to!) adding config.assets.paths << Rails.root.join('app', 'assets', 'fonts') to application.rb (nope), trying asset-url (nope), font-url (nope), and plain url (nope), and restarting the server several times after rake assets:clobber (nope). :(

Community
  • 1
  • 1
queenofgoats
  • 13
  • 3

2 Answers2

0

Don't change the assets path

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.

Use 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").

Make sure your font format is supported

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.

Mick F
  • 7,312
  • 6
  • 51
  • 98
  • Except that I've tried that, and I've just tried again (after restarting the server)--and it's still not working. – queenofgoats Sep 08 '16 at 15:51
  • Did you inspect things in your browser to see if the resource was missing (1) or was not used by the browser (2)? – Mick F Sep 08 '16 at 15:52
  • I didn't--but now we're getting somewhere (maybe). I'm getting this in the console: `GET http://localhost:3000/comic_andy.ttf [HTTP/1.1 404 Not Found 296ms]` as well as: `downloadable font: download failed (font-family: "comic_andy" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: http://localhost:3000/comic_andy.ttf` – queenofgoats Sep 08 '16 at 16:06
  • It's weird that you don't compile as 'assets/comic_andy.ttf'. On a sidenote, it seems like you should use `format('truetype');` instead of `format('ttf');`. I would remove any config you added to `config.assets.paths`, restart your app and see what it does. – Mick F Sep 09 '16 at 11:04
  • I'm accepting your answer because you went out of your way to help. Thanks! :) – queenofgoats Sep 10 '16 at 01:48
0

Solved the problem, finally. F I N A L L Y.

The SASS: 

@font-face { 
    font-family: "comic_andy"; 
    src: font-url('comicandy.ttf');
    src: font-url('comicandy.ttf'), format("truetype"); }

Application.rb: 

config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.enabled = true

Asshat Pipeline wasn't compiling the SASS correctly, because I was missing config.assets.enabled = true. Somewhere along the line, the font also got renamed. I don't know why or how that helped solved the issue, but it appeared to somehow help solve the issue.

queenofgoats
  • 13
  • 3