Adding new fonts to an Angular 2 web page

Question

Adding new fonts to an Angular 2 web page

I am working on an Angular 2 application and I want to incorporate wrapbootstrap. However, I am facing an issue with the fonts (bootstrap, font-awesome, google) and I am not sure how to include them.

While using the css file for wrapbootstrap, I am getting an error that it cannot locate font awesome:

"Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8000/fonts/font-awesome/fontawesome-webfont.woff2?v=4.4.0"

I am confused because I can actually see the missing file(s) in the resources in the Chrome console at that exact location.

https://i.sstatic.net/PKUhZ.png

The font files are currently located in a folder with the following relative path from the css (application.css) file:

https://i.sstatic.net/9AD8z.png

This path matches what is required in the css file:

https://i.sstatic.net/v9vs5.png

I hope someone can offer guidance as I am feeling lost.

Thank you in advance

Solved It turns out that the issue was related to the location of my fonts folder. My file structure is as follows: https://i.sstatic.net/HJJvy.png

I initially added the fonts/ directory relative to where the application.css file was. It needed to be placed in the root of my app (src)

css fonts angular

Answer 1

Answer №1

Including fonts from a package manager can be a complex task at times. One common scenario is when you need to use font-awesome or a similar library.

To achieve this, follow these steps:

In tools/config/project.config.ts:

...
    export class ProjectConfig extends SeedConfig {
        PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

        FONTS_DEST = `${this.APP_DEST}/fonts`;
        FONTS_SRC = [
            'node_modules/bootstrap/dist/fonts/**'
        ];
...

Create a 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));
};

In gulpfile.ts (or in seed.tasks.json for newer versions of the Seed)

// Build dev.
gulp.task('build.dev', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.dev',
              'build.index.dev',
              done));
// Build prod.
gulp.task('build.prod', done =>
  runSequence('clean.prod',
              'tslint',
              'build.assets.prod',
              'build.fonts',    // Added task;
              'build.html_css.prod',
              'build.js.prod',
              'build.bundles',
              'build.bundles.app',
              'build.index.prod',
              done));
// Build test.
gulp.task('build.test', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.test',
              'build.index.dev',
              done));

src

Answer 2

Including fonts from a package manager can be a complex task at times. One common scenario is when you need to use font-awesome or a similar library.

To achieve this, follow these steps:

In tools/config/project.config.ts:

...
    export class ProjectConfig extends SeedConfig {
        PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

        FONTS_DEST = `${this.APP_DEST}/fonts`;
        FONTS_SRC = [
            'node_modules/bootstrap/dist/fonts/**'
        ];
...

Create a 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));
};

In gulpfile.ts (or in seed.tasks.json for newer versions of the Seed)

// Build dev.
gulp.task('build.dev', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.dev',
              'build.index.dev',
              done));
// Build prod.
gulp.task('build.prod', done =>
  runSequence('clean.prod',
              'tslint',
              'build.assets.prod',
              'build.fonts',    // Added task;
              'build.html_css.prod',
              'build.js.prod',
              'build.bundles',
              'build.bundles.app',
              'build.index.prod',
              done));
// Build test.
gulp.task('build.test', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.test',
              'build.index.dev',
              done));

src

Adding new fonts to an Angular 2 web page

Answer №1

Similar questions

ngFor dynamically updates on its own

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

You need to click the form submit image twice in order to make it work

The dynamic addition of the active class is malfunctioning

Substitute commas with spaces in the material chips

Angular 2 Typeface Delivery to the Server

Personalize the controls for spinning arrows

Does this extensive combination of pseudo classes hold true?

Interact with the :before pseudo element when hovering over an element

Display the image on the right side when a specific number of pixels are available

Animating an image inside a bordered div

Creating a Docker image for an Angular application with Node.js

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Adjusting the arrow direction upon clicking in a Select option

Tips for making a slide-in animation that doesn't require adjusting the browser size

Is it possible to swap out a webpage link for a different one based on the size of the screen?

Angular 8 bug: Requiring 2-3 arguments, received only 1

Utilizing CSS to place an image on top of the upcoming <div> container

Errors during compilation in Angular 2 local storage due to the absence of an exported member

Create a tic tac toe game board using CSS styling for a table