1

I am brand new to Angular. I have finished the tutorial and am now building my first app.

Adding an OTF file works fine, but when I made a change to my app.component.css and added:

@font-face { font-family: bookman; src: url('../../../BOOKOS.TTF'); }

When I add this line, I get the following error in my browser:

Failed to compile.

../BOOKOS.TTF
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/app/app.component.css 7:186-216
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

I did some research and found a couple of pages like:

Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''

And they suggest adding this:

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

to my webpack config rules array.

The problem is that I have no idea what that is. It looks like that webpack may be a JS library that Angular is using under the covers, but I don't have any configuration files for webpack in my directory structure.

Thom
  • 14,013
  • 25
  • 105
  • 185

2 Answers2

0

You have to create your own Webpack configuration for Angular to use. Check Angular's documentation on how to use with Webpack then add the file loader the way you found in the article you just linked or using Angular's documentation (*loaders).

David Gomez
  • 2,762
  • 2
  • 18
  • 28
  • https://stackoverflow.com/questions/47920088/where-to-add-global-css-in-an-angular-2-application-made-with-visual-studio-2017 ? or https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project ? – Eliseo Jan 16 '18 at 15:54
  • @Eliseo Neither of these pages helps to solve my problem. I know how to add fonts. The font file is not working. – Thom Jan 16 '18 at 15:58
  • I have created webpack.config.js in the src directory and saw some stuff in the serve command line that indicated that it picked it up. I added rules: [ { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file-loader?name=assets/[name].[hash].[ext]' } ] which appears to have worked fine. I then add my font back into my css and the exact same error appears. – Thom Jan 16 '18 at 15:59
0

Instead of fixing the problem head-on, I circumvented it. I used https://everythingfonts.com/ttf-to-otf to convert my TTF font to OTF. Note that this would not work for all fonts, but this one is public domain and so it's OK to convert the format.

Thom
  • 14,013
  • 25
  • 105
  • 185