Лучший способ подключения и обработки шрифтов.

В этой статье:

• Подключим шрифты
• Оптимизируем структуру папок в /src

Webpack подключение шрифтов

Для того чтобы подключить шрифты нужно прописать в файле scss следующее: (на примере шрифта helvetica)

    // HelveticaNeueCyr - BLACK
    @font-face {
      font-family: "HelveticaNeueCyr-Black";
      src: url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.eot'); /* IE9 Compat Modes */
      src: url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.woff') format('woff'), /* Pretty Modern Browsers */
           url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
           //  url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.svg') format('svg'); /* Legacy iOS */
    }

Webpack обработка шрифта

Чтобы Webpack понимал как нужно обрабатывать шрифты в файле конфига build/webpack.base.conf.js укажем:

        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        },

И на этом все, теперь в scss мы можем ссылаться на шрифт "HelveticaNeueCyr-Black" и для удобства вынести его в отдельную переменную, чтобы привязывать ее к нужным элементам (классам).

Исходный код: https://github.com/vedees/webpack-template