title: How to correctly load .otf/.tff fonts in a React app via a Webpack pipeline?
body: <p>I'm having a hell of a time making this happen and it's possible the various guide I've been following are outdated or I messed something up. I know this has been a common question, and I've played with awesome font, loading it via scss, etc... and it hasn't worked, plus I found it overly complicated where the below approach is also supposed to work and more straight forward.</p>
  <p>The webpack error (at the bottom) is thrown by <code>css-loader</code> which isn't the <code>file-loader</code> or <code>url-loader</code> (I tried both), so I suspect the problem is the <code>css-loader</code> is trying to import/find by .otf font file and can't.</p>
  <p>If anyone has a clue, it would really help. I need to pack in the font file so my app can run offline.</p>
  <p>Here's my file structure:</p>
  <pre><code>./webkacp.config.js
  ./src/
     ./fonts/AvenirLTStd-Roman.otf
     ./index.css
     ./index.jsx
  </code></pre>
  <p>Here's my webpack.config.js:</p>
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  
  module.exports = {
      mode: 'development',
      module: {
          rules: [
              {
                  test: /\.jsx?$/,
                  loader: 'babel-loader'
              },
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader'],
              },
              {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].[ext]',
                              outputPath: 'fonts/'
                          }
                      }
                  ],
              },
              {
                  test: /\.(png|svg|jpg|gif)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].[ext]',
                              outputPath: 'images/'
                          }
                      }
                  ],
              }
          ]
      },
      resolve: {
          extensions: ['.js', '.jsx'],
          alias: {
              '@': path.resolve(__dirname, 'src/'),
          }
      },
      plugins: [new HtmlWebpackPlugin({
          template: './src/index.html'
      })],
      devServer: {
          historyApiFallback: true
      },
      externals: {
          // global app config object
          config: JSON.stringify({
              apiUrl: 'http://127.0.0.1:4000'
          })
      }
  }
  </code></pre>
  <p>Here's my index.css:</p>
  <pre><code>@font-face {
  font-family: &quot;MyFont&quot;;
  src: url(&quot;./fonts/AvenirLTStd-Roman.otf&quot;) format(&quot;otf&quot;);
  /* Add other formats as you see fit */
  }
  
  html, body {
      font-family: 'MyFont', sans-serif;
  }
  </code></pre>
  <p>Here's my index.jsx:</p>
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  import { App } from './App';
  
  import 'bootstrap/dist/css/bootstrap.min.css';
  import '@/index.css';
  
  render(
      &lt;App /&gt;,
      document.getElementById('app')
  );
  </code></pre>
  <p>Finally, here's the webpack error:</p>
  <pre><code>ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js!./src/index.css)
  Module not found: Error: Can't resolve './fonts/AvenirLTStd-Roman.otf' in '/var/sphyrna/csdpac-services/images/csdpac-unified/frontend/src'
   @ ./src/index.css (./node_modules/css-loader/dist/cjs.js!./src/index.css) 4:36-76
   @ ./src/index.css
   @ ./src/index.jsx
  </code></pre>