How to optimize font loading in react?

Question

Less

There is a project on react, less is used as a css preprocessor. Fonts are included 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 common file with styles: Google page speed swears at the lack of a preload strategy: At the same time, for projects with a sass preprocessor, page speed does not give such errors, as I understand it, webpack itself optimizes this. The project uses CRA and customize-cra, the less loader is included in config-overrides.js: module.exports = override( addLessLoader({ javascriptEnabled: true, }), ); There may be other webpack plugins required, but I couldn't google for information on that. I will be grateful for any help.
@import "fonts";

Answer 1

preload must be written in the html itself, otherwise it will not be of any use.
See plugin settings, it can inject preload files into html.