[Clarification] Adding a font #1225

New Issue

fergalmoran · 2025-08-09T17:19:20Z

fergalmoran commented

2025-08-09 17:19:20 +00:00

Originally created by @raberana on 11/29/2016

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;
}

*Originally created by @raberana on 11/29/2016* 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; } ```

fergalmoran closed this issue

2025-08-09 17:19:20 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1225