CODEWITHSUNDEEP
ruby-on-railsheroku
brad
brad

Reputation: 1695

Custom fonts not rendering on heroku in rails

I was able to get fonts working in localhost, but cannot get them working on heroku.

I have been researching and trying things for quite some time and have read several posts but nothing seems to be working.

Here is all relevant information:

FONT FILE

I have a font file in /assets/fonts/MavenProLight-300.otf

CSS

In application.css.erb I have 

      @font-face {
        font-family: 'maven';
        src:font-url('MavenProLight-300.otf');
        src:url('MavenProLight-300.otf');
        font-weight: normal;
        font-style: normal;
        }

production.rb

In config/production.rb i have

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

When i deploy to heroku compile locally

  1. RAILS_ENV=production bundle exec rake assets:precompile
  2. git add public/assets
  3. git push heroku master

My guess is this line of code is off:

src:font-url('MavenProLight-300.otf');

Thanks for any help

Upvotes: 2

Views: 1181

Answers (3)

pkdyn
pkdyn

Reputation: 209

Precompiling or using the production environment only created more errors for me. Here's what worked instead (Rails 6):

  1. As described in this great gist, add the following to application.rb (and not anywhere else): config.assets.paths << Rails.root.join("app","assets","fonts")
  2. Change src: url('...') to font-url('...') in your scss file
  3. git add -A and git commit the changes
  4. git push followed by git push heroku main*
  5. If the application uses a database, heroku run rails db:migrate

*If some error about a missing manifest.json pops up, run rails webpacker:install and start over from step 3.

Upvotes: 1

blnc
blnc

Reputation: 4404

I have nothing to add to @RichardPeck's answer except that remember to use the proper tag to get the ruby to kick in (.erb file)

@font-face {
       font-family: 'maven';
       src: <%= font_url('MavenProLight-300.otf') %>; // ADD THE TAGS
       src: <%= font_url('MavenProLight-300.otf') %>; // ADD THE TAGS
       font-weight: normal;
       font-style: normal;
}

Upvotes: 0

Richard Peck
Richard Peck

Reputation: 76774

Have you tried using font_url?

 @font-face {
    font-family: 'maven';
    src: font_url('MavenProLight-300.otf');
    src: font_url('MavenProLight-300.otf');
    font-weight: normal;
    font-style: normal;
  }

Your other steps seem to be correct (at least according to the way we deploy our apps to Heroku)

Upvotes: 1

Related Questions