How to include fonts in Angular 2 standalone component

Question

I have a component that needs its own font as a dependency. I would like the component to handle the import of the fonts themselves, so it is portable. In addition, our projects use angular-cli, so I still cannot control webpack.config.

I was hoping that angular-cli is smart enough to move the font if I made a simple import in the component, but it doesn't move in the assembly.

import '.my-custom-font.woff'; // doesn't work

In any case, just put me the font moved to the assembly directory, where I can refer to it from my css ...

@font-face {
  font-family: "Custom Font";
  src: url("??????/my-custom-font.woff") format("woff")
}

Answer 1

/assets ( src), :

@font-face {
  font-family: "Custom Font";
  src: url("/assets/my-custom-font.woff") format("woff")
}

html.

Answer 2

Google 2,4,5,6,7 , Google, , .

angular.json src/assets

"assets": [
    "src/assets"
 ],

CSS font-face

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

, ,

body{
 font-family: 'Montserrat', sans-serif;
}