How to load fonts in react?

There is a project for the react, as a css preprocessor is used less. Fonts are connected in a separate .less file:
@font-face {
 font-family: 'Roboto-Bold';
 src: url('../fonts/Roboto-Bold.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

This file is imported into a file with styles :
@import "fonts";

Google page speed complains about the lack of preload strategy:
5e4ce1621a81f411362408.png
In addition, for projects with the sass preprocessor page speed does not give such errors, as I understand webpack itself it optimizes.

The project uses and customize CRA-cra, less the loader is connected to the config-overrides.js:
module.exports = override(
addLessLoader({
javascriptEnabled: true
}),
);
Might need some plugins for webpage, but I wasn't able to Google information about this.

I would be grateful for any help.
April 7th 20 at 15:50
1 answer
April 7th 20 at 15:52
preload is necessary to register in the html, otherwise it'll be useless.

See plugin settings, it can insectici files for preloading in html.
What plugin? - eriberto_Ri commented on April 7th 20 at 15:55
@Nova90that loads your Bromiley less code. - axel_Breitenberg commented on April 7th 20 at 15:58
@Elena.Lockman41, separate plug-in for this is not worth it, all sewn into a CRA - eriberto_Ri commented on April 7th 20 at 16:01

Find more questions by tags LessReactWebpack