'How to add custom font on Rails app (version 7)

In development mode the custom fonts (Raleway) are present but it is not reflected in the staging environment. I deployed my app to Heroku.

Added the following command in the application.rb

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

Added the font-family in the application.bootstrap.scss

@font-face {
  font-family: 'raleway-regular';
  font-style: normal;
  font-weight: 400;
  src: font-url('raleway-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway-semibold';
  src: font-url('raleway-semibold.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway-medium';
  src: font-url('raleway-Medium.ttf') format('truetype');
}

The font files are available in the my_app/app/assets/fonts directory.

I created my rails using the command rails new my_app --javascript esbuild --css bootstrap --database postgresql

Rails version 7

cssruby-on-railsfontsruby-on-rails-7


Solution 1:[1]

Try to use url instead of font-url. It works for me. With scss and the same folder configuration.

@font-face {
  font-family: 'font-name';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-name.ttf") format('truetype');
}

Rails creates its own font path

/assets/font-name-afb238caf5f2396b697d84a32556090b0851e382692f617c6aeaac79e02971a0.ttf

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marcin M?sior

Related Questions