Custom Font (via Asset Pipeline) not Appearing on Heroku with Rails 5.2

Question

I'm trying to get the Playlist font to work on my Rails app. It's showing up on localhost but not on Heroku.

I added a fonts folder inside my assets folder, put the PlaylistCaps.otf and PlaylistScript.otf files in it, and added this line to my config/application.rb:

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

I have this in my application.scss file:

@font-face {
  font-family: "PlaylistScript";
  src: url(/assets/fonts/PlaylistScript.otf) format("opentype");
}

@font-face {
  font-family: "PlaylistCaps";
  src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");
}

I've also tried having the source files on S3 and linking that in the src: url() but to no avail...

I checked to make sure Heroku precompiled my assets on deploy (I don't do it separately).

Can anyone help me figure this out? My live site is currently displaying that awful boilerplate cursive. I've consulted many SO posts (here, here, here) and some gists (like this) but can't find a working solution.

The live site is here if you want to poke around.

Update

I added a google font backup option in my scss to avoid the cursive default. It still isn't showing the proper font, but at least it doesn't claw your eyes out with ugliness upon pageload:

$font-script: 'PlaylistScript', 'Arizonia', cursive;

Are you using git? I assume so with heroku, so run git ls-files --error-unmatch app/assets/fonts/PlaylistCaps.otf from your Rails root directory. Just trying to make sure it's been added to your git repo. — Nathan Kontny
– Nathan Kontny, Commented Oct 30, 2018 at 17:28
@NathanKontny it came back with app/assets/fonts/PlaylistCaps.otf. — Liz
– Liz, Commented Oct 30, 2018 at 17:36

Nathan Kontny · Accepted Answer · 2018-10-30 17:59:58Z

1

You should use asset-path in your Rails sass files.

So instead of:

src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");

Do:

src: asset-path(PlaylistCaps) format("opentype");

There's some documentation here: https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

When you do that, the correct asset paths should get generated. For example, you'll get "fingerprinted" URLs like this: https://www.thestaysanemom.com/assets/PlaylistScript-4a2ebf308b737499dcd1eef2a5cb0edf756089ea4eca0b811034ab41c4dbca8f.otf Which if you see will now download that font.

answered Oct 30, 2018 at 17:59

Nathan Kontny

2312 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Liz Over a year ago

For future reference, this only worked with the fonts inside the stylesheets folder and src: asset-url("PlaylistCaps.otf") format("opentype"); in the src.

Kurniawan Pratama · Accepted Answer · 2018-10-30 17:57:04Z

0

I never use offline fonts before, but i tried it just now and this works:

Delete the folder path and use asset-url instead of url:

@font-face {
  font-family: 'PlaylistScript';
  src: asset-url('PlaylistScript.otf');
}

@font-face {
  font-family: 'PlaylistCaps';
  src: asset-url('PlaylistCaps.otf');
}

Hope that helps.

answered Oct 30, 2018 at 17:57

Kurniawan Pratama

31 bronze badge

Collectives™ on Stack Overflow

Custom Font (via Asset Pipeline) not Appearing on Heroku with Rails 5.2

2 Answers 2

1 Comment

Delete the folder path and use asset-url instead of url:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Delete the folder path and use asset-url instead of url:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related