Improve @font-face url for performance

I have fonts which are defined as

@font-face {
    font-family: 'Manrope';
    font-weight: 400;
    font-style: normal;
    src: local("Manrope Regular"),local("Manrope-Regular"), url("#{$staticPath}fonts/Manrope-Regular.ttf");
    font-display: swap;
}

Now lighthouse report has an issue with this

How can I optimise it and make this message go away?

Has it been a link, preload would have come handy, but this is an existing codebase and I can't really shuffle things around for now as there are many fonts defined.

Has been reading the https://www.paulirish.com/2009/fighting-the-font-face-fout/ and some related posts on CSS tricks, but all these mention about controlling the visibility and preventing FOUT and handling some cross browser issues. But neither of SO threads answered by Paul Irish or CSS tricks talk about preloading this @font-face specifically.

The question I guess here is that can I prefetch with Javascript without using <link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" /> ?