[Solved]-React CRA: Preload fonts from fonts folder-Reactjs

to do that you need to split the font file outside the scss build, for example, you can set it inside public html in the fonts directory and use it. (i do that for some of the external recourse and its work)

now how you can do that: (example)

  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
  

and then you can add:

@font-face {
    font-family: 'ciclefina';
    src: url('fonts/cicle_fina-webfont.eot');
    src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;
}

or you can move fonts and css for these fonts to the public html directory and add preload direct in index.html

or you can add to index.html: <link rel="preload" href="yourfont.woff2" as="font" />