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

Question

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

Thanks @DeepakKumar, sure I'll consider but is it possible to use the downloaded fonts? — Siva
– Siva, Commented Jan 9, 2022 at 1:03
Yes its possible. Can you try changing font-url to asset_url? src: asset_url('raleway-Medium.ttf') format('truetype'); — Deepak Kumar
– Deepak Kumar, Commented Jan 9, 2022 at 8:34
It seems to work also if instead of adding config.assets.paths... you add //= link_tree ../fonts to app/assets/config/manifest.js. I think this is a more modern way. — Jussi Hirvi
– Jussi Hirvi, Commented Oct 13, 2023 at 14:32

Marcin Mąsior · Accepted Answer · 2022-05-11 07:46:19Z

7

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

answered May 11, 2022 at 7:46

Marcin Mąsior

2562 silver badges8 bronze badges

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

2 Comments

Matteo Over a year ago

Also of note, the asset pipeline in Rails now throws an error when you enclose the name of the font in single or double quotes in the src attribute. Just enclose it with parens and it should work fine.

Chnikki Over a year ago

I was getting the below error when trying to use mina to deploy: "SassC::SyntaxError: Error: Invalid CSS after "...32ef36ed15a2e1e": expected expression (e.g. 1px, bold), was '.otf) format("opent' on line 19819:106 of stdin >> 32ef36ed15a2e1e.otf) format("opentype");" I had imported a font file into the application.scss. Once I changed "font-url" to "url" the error went away. Thanks for this!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related