Replace @import url google font with local font

I want to replace the google font loading in my theme with local font loading:

/*@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');*/

@import url('/wp-content/themes/storefront-child/fonts/shadows-into-light-regular.woff2');

But it is not replacing the correct font if i look at the frontend.

In the headline css i find font-family: 'Shadows Into Light', cursive;

With Google font it is loading the correct font style but not with my local file.

Please note that i have downloaded the same font from google under the link on top directly. So the font file should be 100% identical.

Thank you for your help!

Solution

I just copied the code i found under the google link and replaced the font url. And it was done.

For example:

/* latin */
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

and replaced the url https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2 With /wp-content/theme/theme1/fonts/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2

done