8

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")
}
Brian
  • 1,363
  • 3
  • 12
  • 26

1 Answers1

4

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.

Fabrizio Caldarelli
  • 2,982
  • 11
  • 14
  • My goal is to make a portable component. If i have to pull out it's assets and move them around to different directories that sort of defeats the purpose of being modular, no? – Brian Feb 02 '17 at 23:41
  • 1
    If you set this in a global css file, you can move font file everywhere and you have to change just one css file. I usually save it to "apps" > "styles" > "styles.css" in angular-cli.json file. – Fabrizio Caldarelli Feb 02 '17 at 23:44
  • I have the same problem. @Brian , did you find a solution to maintain your code modular, without putting files in a global css folder ? – Sébastien Pertus Feb 08 '18 at 15:00
  • Unfortunately, no. Sorry @SébastienPertus. I moved on from the project before finding a solution to this issue. Good luck – Brian Feb 13 '18 at 16:05
  • It's not the solution. I have the same problem. After I compiled my angular modules (library). The font files included will be used as a normal path. Its not portable, and need to be install in the project which using this module. any ideas? – Nate Cheng Jun 27 '18 at 18:59