1

I have a .NET Core 2.0 app using the Angular 2 Template.

The problem is that I can't add a custom font (woff2) to the app.component.css

@font-face {
    font-family: 'FrutigerBold';
    src: url("./assets/fonts/frutiger65_bold.woff2") format('woff2');
}

And get the following error:

NodeInvocationException: Prerendering failed because of error: Error: Module parse failed: C:\Users\gbuenrostro\documents\visual studio 2017\Projects\SecurityAngular\SecurityAngular\ClientApp\app\assets\fonts\frutiger65_bold.woff2 Unexpected character '�' (1:4)

You may need an appropriate loader to handle this file type.

(Source code omitted for this binary file)

Any ideas?

This is the Project:

enter image description here

2
  • Where is that error appearing? In browser console or during build or at runtime?
    – Brad
    Jan 9, 2018 at 5:43
  • It happens during angular build. Jan 10, 2018 at 14:11

1 Answer 1

0

Don't add the css in your app.component.css. Create a file.css to include the font (not put then in asset folder) and change the webpack.config.vendor adding the file in nonTreeShakableModules

const nonTreeShakableModules = [
    ...
    'file.css',
    ...
];
2
  • The problem with that solution is that whenever I want to change something in that file.css the changes won't reflect in the project, having to recompile the vendor css. Jan 9, 2018 at 21:26
  • what about include the font in the index.html?
    – Eliseo
    Jan 9, 2018 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.