How do I load local fonts with @rails/webpacker?

Question

I’m having an issue loading local font files with @rails/webpacker. The fonts are loaded in the development environment but not in the production environment. It seems like a really simple issue but I have just had so much trouble with it. Below is my @font-face code. My fonts are stored in app/assets/images/fonts

app > assets > stylesheets >config > _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

Fetching the font files in production mode results in a 404 error. When I precompile the assets I can see that the font files have a hash appended to the filename. In the css file delivered to the browser, the url to the font files remains unchanged. To try to fix this I tried to use file-loader, url-loader and resolve-url-loader in the environment module rules yet to no avail. Below is my attempt in the webpack config file.

config > webpack > environment.js

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
);

environment.module = {
  rules: [
    {
      test: /\.(scss|sass|css)$/i,
      use: [
        { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
        { loader: 'postcss-loader', options: { sourceMap: true } },
        'resolve-url-loader',
        { loader: 'sass-loader', options: { sourceMap: true } }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          limit: '100000'
        }
      ],
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'url-loader',
          limit: '100000'
        }
      ]
    }
  ]
};

module.exports = environment;

Any help would be greatly appreciated :)

Answer 1

I'm working with Rails 6.0.3 and had to do the following in order to use custom fonts:

1. Create a fonts folder: app/javascript/application/fonts and placed my fonts there (miso-bold.ttf and miso-bold.otf)

2. In app/javascript/application/app.scss or your main .scss file, I placed the following:

   @font-face {
     font-family: "Miso";
     src: url("./fonts/miso-bold.ttf") format("truetype"), url("./fonts/miso-bold.otf") format("opentype");
   }
   

3. In any .css you can then use it:

   .someclass {
     font-family: "Miso";
   }
   

It's worth noting that Webpacker should be configured to include font files (.otf and .ttf most commonly). Check webpacker.yml.