Tocode
Лучший способ подключения и обработки шрифтов.
  • 2019-06-03
  • 3
  • 2

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

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

  • Подключим шрифты
  • Оптимизируем структуру папок в /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