Add external fonts

Adding custom fonts from npm packages is not supported by default. You may however create a custom task to do so, as follows.

1. Add two fields to ProjectConfig

NB: In the example below, the dest location is ${this.APP_DEST}/fonts because this is where bootstrap expect them to be: ../fonts/. You may need to adjust this relative location depending on how they are referred to in your css file(s).

// file: tools/config/project.config.ts
...
export class ProjectConfig extends SeedConfig {
  PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

  // notice the values are declared as fields of the class, which is done outside of the constructor
  FONTS_DEST = `${this.APP_DEST}/fonts`;
  FONTS_SRC = [
      'node_modules/bootstrap/dist/fonts/**'
  ];

  constructor() {
    // [...]
  }
...

2. Create a custom task

// create file: `tools/tasks/project/build.fonts.ts`

import * as gulp from 'gulp';
import Config from '../../config';

export = () => {
return gulp.src(Config.FONTS_SRC)
      .pipe(gulp.dest(Config.FONTS_DEST));
};

3. Add this new task to your production build(s)

Depending on which prod build you are using, add the task to any of the following:

• build.prod
• build.prod.aot
• build.prod.rollup.aot

// file tools/config/seed.tasks.json

"build.prod": [
  [...],
  "build.assets.prod",
  "build.fonts",  // <= insert after "build.assets.prod"
  [...],
],

// "build.prod.aot": [...]
// "build.prod.rollup.aot": [...]