1

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;
Liz
  • 1,369
  • 2
  • 26
  • 61
  • 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 Oct 30 '18 at 17:28
  • @NathanKontny it came back with `app/assets/fonts/PlaylistCaps.otf`. – Liz Oct 30 '18 at 17:36

2 Answers2

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.

Nathan Kontny
  • 231
  • 2
  • 6
  • For future reference, this only worked with the fonts inside the stylesheets folder and `src: asset-url("PlaylistCaps.otf") format("opentype");` in the src. – Liz Nov 15 '18 at 22:38
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.

Kurniawan Pratama
  • 3
  • 1