Webpack loader for Fonts

While I was learning React with Webpack, I wanted to try with real time example. Hence I was implementing a Bootstrap temulate using React. There are more font awesome fonts used in Bootstrap. I was having difficulty of including in my Webpack builder. Tried googling around, and the solution which I’ve got is like this:

// Font and images
{ test: /\.(woff2?|svg|jpe?g|png|gif|ico)$/, loader: "url?limit=10000" },
{ test: /\.(ttf|eot)$/, loader: "file" }

In the above code I’m using url-loader and file-loader. The problem is the font-awesome fonts are rendered as, for instance fontawesome.woff2?v=4.3.

If you see, there is a query string after the font file name. That was causing me an issue while building using webpack. It always throws an error, that my loader for the module is not found. I fixed it by using as follows:

// Font and images
{ test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/, loader: 'url?limit=10000' },
{ test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/, loader: 'file' }

I believe it helps someone who got stuck in this kind of situation.

5 Replies to “Webpack loader for Fonts”

  1. Thanks, it works great. However, the regex code you supplied is for a file with a querystring matching MAJOR.MINOR.PATCH, for example “DejaVuSans-Bold.ttf?v=1.1.2”

    However, if your querystring is only MAJOR.MINOR such as DejaVuSans-Bold.ttf?v=1.1, then you will need the following regex codes:

    // Font and images with support for generated querystrings after loader filename. Example” DejaVuSans-Bold.ttf?v=1.1
    { test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/, loader: ‘url?limit=10000’ },
    { test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]))|(ttf|eot)$/, loader: ‘file?name=/assets/fonts/[name].[ext]’ },

Leave a Reply