[Clarification] Adding a font

[raberana]

I will be using an external font (.ttf/.woff2) and I am wondering if I should include this to the webpack.config.vendor.js

In the template, there is an existing loader to handle .ttf/.woff2 files:

loaders: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
        ]

It is not clear to me how webpack knows that the path of the files inside the vendor array in the entry section is located in the local node_modules folder (this is another question that I would be grateful if you also answer :) )

 entry: {
        vendor: [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
          ....
            'jquery',
            'font-awesome/css/font-awesome.css',
            'zone.js',
        ]
    }

So if I add this to the entry section, should I be pointing it to the correct path (to whatever folder I put the .ttf/.woff2 files)?
Or I should not use webpack for this and just reference it in my app.component.css like this below?

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

[SteveSandersonMS]

The idea with Webpack is that it auto-discovers the dependencies between files in your project, and hence automatically includes all the files that you will need at runtime.

For example, in CSS files, you can directly reference a font file (e.g., .ttf or .woff2), and then Webpack will automatically bundle up your font file according to whatever loader rule you have for .ttf/.woff2 files.

Your CSS code could look like this:

@font-face {
  src: local('Open Sans Light'), url(some-node-module/dir/some-font-file.ttf) format('woff2');
  /* ... other properties here ... */
}

And then Webpack will look for node_modules/some-node-module/dir/some-font-file.ttf and includes it in your bundles. You don't have to mention some-font-file.ttf directly in your Webpack config.

Likewise, if you wanted to load the .ttf file from a path relative to your CSS file (e.g., not from node_modules), you could do so like this:

@font-face {
  src: local('Open Sans Light'), url(./some-font-file.ttf) format('woff2');
  /* ... other properties here ... */
}

... and now it will look for some-font-file.ttf in the same directory as the CSS file that references it.

I see you already have url-loader configured for font files. With your config, font files under 100KB will be inlined into your CSS as base64 data URLs, whereas font files over 100KB will be outputted as separate files that are loaded at runtime via separate HTTP requests. That's a perfectly reasonable config.

So in summary, you don't have to do either of the things you mentioned (explicitly mention the font in your entry config, nor load it from a CDN). You can just let Webpack do the work for you :)

It is not clear to me how webpack knows that the path of the files inside the vendor array in the entry section is located in the local node_modules folder (this is another question that I would be grateful if you also answer :) )

Webpack resolves the file references like this:

• For relative paths (e.g., ./some-file.extension or ../../dir1/dir2/some-file.extension), it resolves it relative to the file making that reference. Relative paths are ones that start with ./ or ../.
• For non-relative paths (e.g., something/some-file.extension), it assumes the first segment is the name of an NPM module, and anything after that is a path inside the NPM module. For example, the path might be node_modules/something/some-file.extension within your project.

Hope that covers it!