How to use custom fonts in Rails 6 with Webpack

If you have the fonts inside /assets/ then use the asset-url helper.

src: asset-url('fonts/my-font.eot') format('embedded-opentype'),
     asset-url('fonts/my-font.woff') format('woff'),
     asset-url('fonts/my-font.ttf') format('truetype'),
     asset-url('fonts/my-font.svg#my-font') format('svg')

That way Sprockets will change "fonts/my-font.xxx" to the filename with the digest.

Personally I don't like to put fonts on the assets pipeline since they are probably not changing and only slows down your precompilation time, so I put them in public:

/public/fonts/my-font.eot
/public/fonts/my-font.woff
...ect...

And just use your original css code.

(This has nothing to do with webpack or webpacker)

1. Add your fonts into app/assets/fonts folder.

2. Now you need to tell Sprockets to load fonts in the first place. To do that, just add

   //= link_tree ../fonts to app/assets/config/manifest.js

Side note: you may come across advice to update initializers/assets.rb, but that is outdated, and Sprockets 4 wants you to add directive to load fonts to manifest.js.

3. You need to define font-face for use in your application, and your intention was right, but you need to use font-url instead of url for it to work, so

src: font-url('my-font.eot') format('embedded-opentype') ...

And notice that you don't need to specify fonts directory, because font-url already implies it.

Bonus: you can use this sass mixin that simplifies specifying alternative formats for your fonts.