While developing my application, I noticed that the custom fonts (Raleway) are visible, but they are not showing up in the staging environment after deploying to Heroku.
To address this issue, I included the following command in the application.rb file:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
I also added the font-family declarations in the application.bootstrap.scss file as follows:
@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 can be found in the my_app/app/assets/fonts
directory of my project.
For creating my Rails app, I used the command
rails new my_app --javascript esbuild --css bootstrap --database postgresql
.
This project was built using Rails version 7.