Search code examples
webpackfontswebpack-2webpack-loader

How to add a font to webpack build?

How do you add a font to a webpack project? I can't believe that after looking through a dozen webpack guides I still can't find an actual solution for adding a font. I am not using React, I am using a boilerplate that can be found here: https://github.com/sandrina-p/essential-webpack-boilerplate

Folder structure is as follow:

src
|-fonts
|-scripts
|-styles
index.thml

I've added the following to my config file:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file-loader?name=/fonts/[name].[ext]'
},

I am importing the font-family in my css like so:

@font-face {
  font-family: 'MPR' !important;
  src: url('/styles/MPR.ttf') format('ttf'),
}



h2 {
    font-family: 'MPR';
}

I don't get any errors, the h2 tag just doesn't display the font and defaults to times new roman. Any insight would be greatly appreciated, I really don't want to have to rebuild my whole project in gulp just so I can use a font.

Solution

  • My guess is you need to add relative paths and not absolute paths for the url

    https://survivejs.com/webpack/loading/fonts/index.html#integrating-font-awesome-to-the-project