How to include fonts in self contained Angular 2 component

Question

I have a component that requires a custom font as a dependency. I'd like the component to handle the import of the fonts itself so it's portable. Also, our projects are using angular-cli so I have no control over webpack.config anyway.

I was hoping angular-cli was smart enough to move the font if I did a simple import in the component, but it doesn't get moved on build.

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

Anyway, simply put I need the font moved to the build directory where I can reference it from my css...

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

Answer 1

If you put files in /assets folder (inside src folder), you can refer the font with:

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

and then use it in the html.