Шрифты не работают при загрузке модулями CSS

Question

Я использую CSS-модули с sass. Поэтому я пытаюсь загрузить их так:

@font-face {
  font-family: 'Book Antiqua';
  src: url(@/assets/fonts/book_antiqua.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(@/assets/fonts/Montserrat/Montserrat-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

Самый интересный путь - это то, что они действительно загружаются браузером.

Итак, встроенный CSS выглядит так:

@font-face {
  font-family: 'Book Antiqua';
  src: url("http://localhost:8080/static/media/book_antiqua.d8ae129c.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Montserrat';
  src: url("http://localhost:8080/static/media/Montserrat-Regular.2bb14503.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

Но они не работают (поэтому я ничего не понимаю. Браузер загружает шрифты, синтаксис шрифта-лица выглядит нормально, но они не запускаются.

Загрузчики моего конфига webpack:

rules: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx|ts|tsx)$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
          /\.scss$/,
        ],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            'postcss-loader',
          ],
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                sourceMap: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            'sass-loader',
          ],
        }),
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        },
      },
    }]

Answer 1

Я никогда не импортирую шрифты из своих активов, я всегда использую сервисы, такие как Google Fonts, чтобы получить мои, у них там есть montserrat , и я импортирую их вот так

@import url('https://fonts.googleapis.com/css?family=Montserrat');

Но это всего лишь лейкопластырь, другое место, где может быть проблема: где вы используете этот шрифт, как важно добавить этот шрифт в определенный класс, например, для montserrat вы должны сделать это так

font-family: 'Montserrat', sans-serif;