Change `from` pattern for copying font files

[jpkempf]

Current situation: Line 77 of the Webpack configuration defines the glob pattern for copying fonts from the source to the public folder. The pattern is currently defined as ./*.

Proposed improvement: I would like to update this pattern to ./**/*.*, as is already the case for images, so that font files which are located in their own subfolders also match the pattern. In my experience, this is frequently the case and changing the pattern would save others the time I spent last Friday trying to debug why my fonts are not being copied over. 😅

I'm happy to open a pull request if you consider this a desirable improvement.

[renestalder]

Wouldn't it be even better not to have a hard-coded copy task and instead let Webpack copy them when they are referenced somewhere? I mean, that's actually the case for using Webpack.

[jpkempf]

It's hard for me to argue against that, but two questions come to mind:

1. Why have this copy task at all, then? Or any of the other copy tasks, for that matter? The advantage I see is that it's perfectly clear what happens, without having to dive deeper into the configuration.
2. Do you have an example of how configuration like this might actually look and work? I do have this bit defined in my webpack.app.js (just an excerpt):

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

Without this bit of configuration, my project would not even compile, but it does nothing to actually copy fonts that webpack comes across in any .scss files. So thus far, personally I am happy to use the "brute-force, copy everything" approach instead. 😉

[ItsJepser]

Sorry for interrupting your issue, I currently have a similar issue, my SCSS won't pickup the font files, they are being copied to the public folder, but I cant use the font in SCSS. I use the same code as shown above, and everything compiles with no errors. Does somebody have any clue, if there is a extra loader needed for this or is it something else?

[jpkempf]

Are you using the correct path to refer to your font files? It should be /patternlab/fonts.

[ItsJepser]

Do you mean like this?

@font-face {
    font-family: 'font-here';
    src: url("/patternlab/fonts/font-here.woff") format("woff");
}

[mbulfair]

@ItsJepser I believe the path is from the public folder, you should just be able to do /public/ and the folder where fonts live go there. Unless you're using a CDN. I would think a copy of fonts would be enough, a loader isn't the issue or needed.

[mbulfair]

Wouldn't it be even better not to have a hard-coded copy task and instead let Webpack copy them when they are referenced somewhere? I mean, that's actually the case for using Webpack.

This is due to the version of pattern-lab core that's being used, it was a fork of the gulp version and needed to copy files at that time. I am in full support of changes and improvements. You can fork the repo and follow the other contributing guidelines. I would like to get this version working with the latest version of the core, though my day job has prevented me to really spend a lot of time outside of patches on this project.

[ItsJepser]

@ItsJepser I believe the path is from the public folder, you should just be able to do /public/ and the folder where fonts live go there. Unless you're using a CDN. I would think a copy of fonts would be enough, a loader isn't the issue or needed.

Even when I use /public/ the font isn't loaded in when I try to select it in font-familiy:

We've tried alot of loaders, without success. The only thing we're able to do, is download the woff file if we go to: http://localhost:3000/fonts/fontfolder/fontfile.woff

Could you help us with an example?

[renestalder]

This is due to the version of pattern-lab core that's being used, it was a fork of the gulp version and needed to copy files at that time. I am in full support of changes and improvements. You can fork the repo and follow the other contributing guidelines. I would like to get this version working with the latest version of the core, though my day job has prevented me to really spend a lot of time outside of patches on this project.

I'm not sure I can provide the implementation of the latest core, but at least I could extend the Webpack functionality to get rid of the manual copy config and rely to the dependency tree of Webpack during build. I already applied those changes in most project where I used Comcast's Webpack editions, so I for sure could provide this change via a pull request. Will have to check how much time it takes me.