preloading fonts

Hi,

I’m self-hosting Mulish 400 and 700 weight fonts.
I am trying to preload them, but it looks like it is not working.

I created hook element (wp_head, entire site).
Added the link content: `<link rel="preload" as="font" type="font/woff2" href="https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff2" crossorigin="anonymous">
<link rel="preload" as="font" type="font/woff2" href="https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff2" crossorigin="anonymous">`

my font face CSS: `/* mulish-regular - latin */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 400;
src: local('Mulish Regular'), local('Mulish-Regular'),
url('https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff2') format('woff2'),
url('https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff') format('woff');
}
/* mulish-700 - latin */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 700;
src: local('Mulish Bold'), local('Mulish-Bold'),
url('https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff2') format('woff2'),
url('https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff') format('woff');
}`

In LiteSpeed Cache settings am using font-display:swap;

After viewing any of the pages (after clearing cache) FOUT is still visible. Could you please look into it?

thanks,
Tibor