Webpack “OTS parsing error” loading fonts

Question

My webpack config specifies that fonts should be loaded using url-loader, and when I try to view the page using Chrome I get the following error:

Answer 1

The best and easiest method is to base64 encode the font file. And use it in font-face. For encoding, go to the folder having the font-file and use the command in terminal:

base64 Roboto.ttf > basecodedtext.txt

You will get an output file named basecodedtext.txt. Open that file. Remove any white spaces in that.

Copy that code and add the following line to the CSS file:

@font-face {
  font-family: "font-name";
  src: url(data:application/x-font-woff;charset=utf-8;base64,<>) format('woff');
}  

Then you can use the font-family: "font-name" in your CSS.