0

I have an Angular 6 SPA with Webpack 4 for bundling based on the following repo;

AngularWebpackVisualStudio Example Repo

However, I am having issue with importing external fonts to the project. From looking at the webpack.dev.config.js I have the following code;

{
     test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
     use: 'file-loader?name=assets/[name]-[hash:6].[ext]'
}

Which should bundle the fonts. I have a .ttf file located in my angular app folder ( /ClientApp/fonts/Font.ttf);

then in my app.component.scss I have tried adding the following;

@import '../fonts/Font.ttf';

@font-face {
    font-family: MyFont;
    src: url("../fonts/Font.ttf") format("opentype");
}

However, when I then run the site I am getting a 404 error on the font file? localhost/fonts/Font.tff

Could someone please direct me as to what I am doing wrong here please?

Matthew Flynn
  • 3,661
  • 7
  • 40
  • 98

1 Answers1

0

Add the fonts to angular.json under styles:

angular2-cli include custom fonts

mchl18
  • 2,119
  • 12
  • 20