Custom font from node_modules into angular-cli

Question

I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.

I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder a-icons in node_modules:

a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg

In my main stylesheet I've added:

@import '~a-icons/a-icon';
@font-face {
  font-family: 'a-icon';
  src: url('../../../node_modules/a-icons/a-icon.eot');
  src:
    url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
    url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
    url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}

@import '~a-icons/a-icon' is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg

This is one of the errors:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
  using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
    using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
      as directory
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
 @ ./src/assets/stylesheets/global-styles.scss
 @ multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css

I'm using scss, but the font is in vanilla css.

I've also tried @import '../../../node_modules/a-icons/a-icon.css'; The icons show up as a square and I think that's because the font-family isn't recognized. So I added @font-face, but that it doesn't do anything.

I also tried changing angular-cli.json to include it in the assets and style:

"assets": [
    "assets",
    "assets/languages",
    "assets/stylesheets",
    "favicon.ico",
    "environments/environment.values.js",
    {
      "glob": "a-icon.*",
      "input": "../node_modules/a-icons",
      "output": "./assets/a-icons"
    }
"styles": [
    "assets/stylesheets/global-styles.scss",
    "../node_modules/normalize.css/normalize.css",
    "../node_modules/a-icons/a-icon.css"
    ]

This doesn't do anything.

Answer 1

First, I advise you to create a single css file "fonts.css" in your node module, it will be simple to include a css file in your application rather than redefine the fonts and refer to N files (woff2, eot...ect), for example: Your fonts.css:

@font-face {
  font-family: 'a-icon';
  src: url('a-icon.eot');
  src:
    url('a-icon.ttf') format('truetype'),
    url('a-icon.woff') format('woff'),
    url('a-icon.svg') format('svg');
}

Second, include the file "fonts.css" in your styles.css of your angular application as follows:

@import "~a-icons/fonts.css";

I have a similar solution that works fine, my node module contains a theme with fonts.